这就是我正在尝试的方式
<script type="text/javascript">
$(document).ready(function(){
$('#dateIn,#dateOut').click(function(e){
e.preventDefault();
});
});
</script>
但输入仍然“启动” iPhone的键盘
ps：我想这样做是因为我使用datepicker插件作为日期
这就是我正在尝试的方式
<script type="text/javascript">
$(document).ready(function(){
$('#dateIn,#dateOut').click(function(e){
e.preventDefault();
});
});
</script>
但输入仍然“启动” iPhone的键盘
ps：我想这样做是因为我使用datepicker插件作为日期
Answers:
通过将属性readonly（或readonly="readonly"）添加到输入字段，您应该防止任何人在其中输入任何内容，但仍然能够在其上启动click事件。
当您使用日期/时间选择器时，这在非移动设备中也很有用
readonly因为某些小部件不会在readonly输入上绑定事件。
您可以在DatePicker中添加一个回调函数，以告诉它在显示DatePicker之前模糊输入字段。
$('.selector').datepicker({
beforeShow: function(){$('input').blur();}
});
注意：iOS键盘将出现一秒钟，然后隐藏。
由于我无法评论最上面的评论，因此我不得不提交“答案”。
所选答案的问题在于，将字段设置为只读会使该字段脱离iPhone上的制表符顺序。因此，如果您喜欢通过单击“下一个”来输入表单，则将跳过该字段。
我在这里问了类似的问题，得到了一个很棒的答案-使用iPhone原生的datepicker-很棒。
简介/伪代码：
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();
将字段类型动态设置为“日期”的原因是，Opera将弹出自己的本机日期选择器，否则，我假设您想在桌面浏览器上始终显示日期选择器。
下面的代码对我有用：
<input id="myDatePicker" class="readonlyjm"/>
$('#myDatePicker').datepicker({
/* options */
});
$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});
根据我的观点，解决此问题的最佳方法是使用“ ignoreReadonly”。
首先将输入字段设置为只读，然后添加ignoreReadonly：true。这样可以确保即使文本字段为readonly，也会显示弹出窗口。
$('#txtStartDate').datetimepicker({
locale: "da",
format: "DD/MM/YYYY",
ignoreReadonly: true
});
$('#txtEndDate').datetimepicker({
locale: "da",
useCurrent: false,
format: "DD/MM/YYYY",
ignoreReadonly: true
});
});
所以这是我的解决方案（类似于John Vance的回答）：
首先，请转到此处并获得检测移动浏览器的功能。
http://detectmobilebrowsers.com/
他们有很多不同的方法来检测您是否在移动设备上，因此请找到一种适合您所使用的方法。
您的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
});
});
这样，您仍然可以在移动设备中使用本机日期选择器，同时仍然可以通过任何一种方式设置最小和最大日期。
非移动字段应为只读，因为如果像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"
});
});
注意：您将必须找到合适的图像。
@ rene-pot是正确的。但是，您将在网站的桌面版本上看到不允许的标志。要解决此问题，请将readonly =“ true”应用于仅将在移动视图而非桌面上显示的div。在此处查看我们的操作http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/