这就是我正在尝试的方式
<script type="text/javascript">
$(document).ready(function(){
$('#dateIn,#dateOut').click(function(e){
e.preventDefault();
});
});
</script>
但输入仍然“启动”iphone 的键盘
ps：我想这样做是因为我正在使用 datepicker 插件来获取日期
【问题讨论】：
标签： javascript jquery iphone keyboard
通过将属性readonly（或readonly="readonly"）添加到输入字段，您应该可以防止任何人在其中输入任何内容，但仍然可以在其上启动点击事件。
当您使用日期/时间选择器时，这在非移动设备中也很有用
【讨论】：
readonly，因为某些小部件不会在readonly 输入上绑定事件。
<input inputmode='none'>
inputmode全局属性是一个枚举属性，它提示用户在编辑元素或其内容时可能输入的数据类型。它可以有以下值：
none- 没有虚拟键盘。当页面实现自己的键盘输入控件时。
我正在成功使用它（在 Chrome/Android 上测试）
CSS-Tricks: Everything You Ever Wanted to Know About inputmode
【讨论】：
您可以向 DatePicker 添加一个回调函数，告诉它在显示 DatePicker 之前模糊输入字段。
$('.selector').datepicker({
beforeShow: function(){$('input').blur();}
});
注意：iOS 键盘会出现几分之一秒，然后隐藏。
【讨论】：
以下代码对我有用：
<input id="myDatePicker" class="readonlyjm"/>
$('#myDatePicker').datepicker({
/* options */
});
$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});
【讨论】：
由于我无法对置顶评论发表评论，因此我不得不提交“答案”。
所选答案的问题在于，将该字段设置为只读会使该字段脱离 iPhone 上的 Tab 键顺序。因此，如果您喜欢通过点击“下一步”来输入表单，您将直接跳过该字段。
【讨论】：
我在这里问了一个类似的问题，得到了一个绝妙的答案 - 使用 iPhone 原生日期选择器 - 很棒。
How to turn off iPhone keypad for a specified input field on web page
概要/伪代码：
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 会弹出自己的本地日期选择器，否则我假设您希望在桌面浏览器上一致地显示日期选择器。
【讨论】：
根据我的意见，解决此问题的最佳方法是使用“ignoreReadonly”。
首先将输入字段设为只读，然后添加 ignoreReadonly:true。 这将确保即使文本字段是只读的，也会显示弹出窗口。
$('#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"
});
});
注意：您必须找到合适的图像。
【讨论】：
我有一个通用的“无键盘”脚本 - 适用于 Android 和 iPhone：
$('.readonlyJim').on('focus', function () {
$(this).trigger('blur')
})
只需将添加类readonlyJim 附加到输入标签即可。
(*抱歉这里星际迷航太多了)
【讨论】：