if small screen mobile device
set field type to "date" - e.g. document.getElementById('my_field').type = "date";
// input fields of type "date" invoke the iPhone datepicker.
else
init datepicker - e.g. $("#my_field").datepicker();
If Mobile Then
<input id="selling-date" type="date" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
else
<input id="selling-date" type="text" class="date-picker" readonly="readonly" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
查询:
$( ".date-picker" ).each(function() {
var min = $( this ).attr("min");
var max = $( this ).attr("max");
$( this ).datepicker({
dateFormat: "yy-mm-dd",
minDate: min,
maxDate: max
});
});
这样,您仍然可以在移动的中使用本机日期选择器,同时仍然可以设置最小和最大日期。 非移动的的字段应该是只读的,因为如果像chrome for ios这样的移动浏览器“请求桌面版本”,那么他们可以绕过移动检查,而你仍然希望阻止键盘显示。 但是,如果字段是只读的,用户可能会觉得无法更改该字段。您可以通过更改CSS使其看起来不是只读的(即将边框颜色更改为黑色)来解决此问题,但除非您更改了所有输入标签的CSS,否则您会发现很难在浏览器之间保持外观一致。 为了解决这个问题,我只在日期选择器中添加了一个日历图像按钮,只需稍微修改一下JQuery代码:
$( ".date-picker" ).each(function() {
var min = $( this ).attr("min");
var max = $( this ).attr("max");
$( this ).datepicker({
dateFormat: "yy-mm-dd",
minDate: min,
maxDate: max,
showOn: "both",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date"
});
});
9条答案
按热度按时间kmpatx3s1#
通过将属性
readonly
(或readonly="readonly"
)添加到输入字段中,您应该可以防止任何人在其中键入任何内容,但仍然可以在其中启动单击事件。在使用日期/时间选取器时,这在非移动设备中也很有用
sg2wtvxw2#
inputmode属性
inputmode
全局属性是一个枚举属性,它提示用户在编辑元素或其内容时可能输入的数据类型。它可以具有以下值:none
-没有虚拟键盘。当页面实作自己的键盘输入控件时。我正在成功地使用它(在 Chrome/Android 上测试)
CSS-Tricks: Everything You Ever Wanted to Know About inputmode
u0sqgete3#
您可以将回调函数添加到DatePicker,以指示它在显示DatePicker之前模糊输入字段。
【注】iOS键盘会出现几分之一秒,然后隐藏。
xhv8bpkk4#
下面的代码对我有用:
vhmi4jdf5#
我在这里问了一个类似的问题,得到了一个很棒的答案--使用iPhone的原生日期选择器--这很棒。
How to turn off iPhone keypad for a specified input field on web page
概要/伪代码:
将字段类型动态设置为“date”的原因是,Opera将弹出它自己的本地日期选择器,否则,我假设您希望在桌面浏览器上一致地显示日期选择器。
c8ib6hqw6#
由于我不能评论顶部的评论,我被迫提交一个“答案”。
选择的答案的问题在于,将该字段设置为只读会使该字段在iPhone上不按Tab键顺序显示。因此,如果你喜欢通过点击“下一步”来输入表单,你可以直接跳过该字段。
q3qa4bjr7#
根据我的意见,解决这个问题的最好方法是使用“ignoreReadonly”。
首先将输入字段设为只读,然后添加ignoreReadonly:true。这将确保即使文本字段为只读,也会显示弹出窗口。
bvn4nwqk8#
下面是我的解决方案(类似于约翰·万斯的答案):
首先到这里,并获得一个功能来检测移动的浏览器。
http://detectmobilebrowsers.com/
他们有很多不同的方法来检测你是否在移动的,所以找一个与你正在使用的工作。
您的HTML页面(伪代码):
查询:
这样,您仍然可以在移动的中使用本机日期选择器,同时仍然可以设置最小和最大日期。
非移动的的字段应该是只读的,因为如果像chrome for ios这样的移动浏览器“请求桌面版本”,那么他们可以绕过移动检查,而你仍然希望阻止键盘显示。
但是,如果字段是只读的,用户可能会觉得无法更改该字段。您可以通过更改CSS使其看起来不是只读的(即将边框颜色更改为黑色)来解决此问题,但除非您更改了所有输入标签的CSS,否则您会发现很难在浏览器之间保持外观一致。
为了解决这个问题,我只在日期选择器中添加了一个日历图像按钮,只需稍微修改一下JQuery代码:
注意:您必须找到一个合适的图像。
vcudknz39#
我有一个通用的“无键盘”脚本-适用于我的Android和iPhone:
只需将add类
readonlyJim
附加到输入标记,就可以了。(* 抱歉,这里有太多星际迷航)