防止iPhone默认键盘在聚焦<input>时
这是我如何尝试
<script type="text/javascript"> $(document).ready(function(){ $('#dateIn,#dateOut').click(function(e){ e.preventDefault(); }); }); </script> 但input仍然'推出'iPhone的键盘
PS：我想这样做，因为我使用datepicker插件的date
通过将input字段设置为readonly="true"您应该防止任何人input任何内容，但仍然可以在其上启动点击事件。
在使用date/时间select器的情况下，这对非移动设备也很有用
您可以添加一个callback函数到DatePicker，告诉它在显示DatePicker之前模糊input字段。
$('.selector').datepicker({ beforeShow: function(){$('input').blur();} });
注意：iOS键盘会出现几分之一秒，然后隐藏。
由于我不能评论最重要的评论，所以我不得不提交一个“答案”。
所选答案的问题是，将该字段设置为只读将使该字段不在iPhone上的选项卡顺序中。 所以如果你喜欢通过点击“下一步”来input表格，你会跳过这个字段。
我在这里问了一个类似的问题，并得到了一个奇妙的答案 – 使用iPhone本机dateselect器 – 这太好了。
如何closures网页上指定input字段的iPhone键盘
简介/伪代码：
if small screen mobile device set field type to "date" - eg document.getElementById('my_field').type = "date"; // input fields of type "date" invoke the iPhone datepicker. else init datepicker - eg $("#my_field").datepicker();
dynamic设置字段types为“date”的原因是，否则Opera会popup自己的本机dateselect器，我假设你想在桌面浏览器上一致地显示dateselect器。
下面的代码适用于我：
<input id="myDatePicker" class="readonlyjm"/> $('#myDatePicker').datepicker({ /* options */ }); $('.readonlyjm').on('focus',function(){ $(this).trigger('blur'); });
所以这里是我的解决scheme（类似于约翰·万斯的答案）：
首先去这里获取一个检测移动浏览器的function。
http://detectmobilebrowsers.com/
他们有很多不同的方法来检测你是否在手机上，所以find一个与你正在使用的工作。
您的HTML页面（伪代码）：
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" />
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 }); });
这样，您仍然可以在移动设备上使用本机dateselect器，同时仍然可以设置最短和最长date。
非移动领域应该是只读的，因为如果像ios的Chrome浏览器这样的移动浏览器“请求桌面版本”，那么他们可以绕过移动支票，你仍然想阻止键盘显示出来。
但是，如果该字段是只读的，它可以看起来像一个用户，他们不能改变字段。 您可以通过更改CSS来使其看起来像不是只读（即将边框颜色更改为黑色），但除非您更改所有input标签的CSS，否则将难以保持外观一致浏览器。
为了得到我只是添加一个日历图像button的dateselect器。 只需要改变你的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" }); });
注意：你必须find合适的图像。
根据我的观点，最好的解决方法是使用“ignoreReadonly”。
首先使input字段只读，然后添加ignoreReadonly：true。 这将确保即使文本字段是只读的，popup窗口将显示。
$('#txtStartDate').datetimepicker({ locale: "da", format: "DD/MM/YYYY", ignoreReadonly: true }); $('#txtEndDate').datetimepicker({ locale: "da", useCurrent: false, format: "DD/MM/YYYY", ignoreReadonly: true }); });
@ rene-pot是正确的。 然而，您将在网站的桌面版本上有一个不允许的标志。 解决这个问题的方法是将readonly =“true”应用于仅显示在移动视图上而不显示在桌面上的div。 看看我们在这里做了什么http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/
