Javascript 聚焦 <input> 时防止 iPhone 默认键盘
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7610758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
prevent iphone default keyboard when focusing an <input>
提问by Toni Michel Caubet
this is how i'm trying
这就是我正在尝试的方式
<script type="text/javascript">
$(document).ready(function(){
$('#dateIn,#dateOut').click(function(e){
e.preventDefault();
});
});
</script>
but the input stills 'launching' iphone's keyboard
但输入仍然“启动” iphone 的键盘
ps: i want to do this because i'm using datepicker plugin for date
ps：我想这样做是因为我正在使用 datepicker 插件进行日期
回答by Rene Pot
By adding the attribute readonly(or readonly="readonly") to the input field you should prevent anyone typing anything in it, but still be able to launch a click event on it.
通过将属性readonly（或readonly="readonly"）添加到输入字段，您应该防止任何人在其中输入任何内容，但仍然能够在其上启动单击事件。
This is also usefull in non-mobile devices as you use a date/time picker
当您使用日期/时间选择器时，这在非移动设备中也很有用
回答by nachomaans
You can add a callback function to your DatePicker to tell it to blur the input field before showing the DatePicker.
您可以向 DatePicker 添加回调函数，以告诉它在显示 DatePicker 之前模糊输入字段。
$('.selector').datepicker({
beforeShow: function(){$('input').blur();}
});
Note: The iOS keyboard will appear for a fraction of a second and then hide.
注意：iOS 键盘将出现几分之一秒然后隐藏。
回答by John Vance
I asked a similar question here and got a fantastic answer - use the iPhone native datepicker - it's great.
我在这里问了一个类似的问题并得到了一个很好的答案 - 使用 iPhone 原生日期选择器 - 很棒。
How to turn off iPhone keypad for a specified input field on web page
Synopsis / pseudo-code:
概要/伪代码：
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();
The reason for dynamically setting the field type to "date" is that Opera will pop up its own native datepicker otherwise, and I'm assuming you want to show the datepicker consistently on desktop browsers.
将字段类型动态设置为“日期”的原因是，否则 Opera 将弹出其自己的本机日期选择器，并且我假设您希望在桌面浏览器上一致地显示日期选择器。
回答by John Vance
Since I can't comment on the top comment, I'm forced to submit an "answer."
由于我无法对最高评论发表评论，因此我被迫提交了“答案”。
The problem with the selected answer is that setting the field to readonly takes the field out of the tab order on the iPhone. So if you like entering forms by hitting "next", you'll skip right over the field.
所选答案的问题在于将字段设置为只读会使该字段脱离 iPhone 上的 Tab 键顺序。因此，如果您喜欢通过点击“下一步”来输入表单，您将直接跳过该字段。
回答by Juan Manuel De Castro
Below code works for me:
下面的代码对我有用：
<input id="myDatePicker" class="readonlyjm"/>
$('#myDatePicker').datepicker({
/* options */
});
$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});
回答by Akbar Badhusha
Best way to solve this as per my opinion is Using "ignoreReadonly".
我认为解决此问题的最佳方法是使用“ignoreReadonly”。
First make the input field readonly then add ignoreReadonly:true. This will make sure that even if the text field is readonly , popup will show.
首先将输入字段设为只读，然后添加 ignoreReadonly:true。这将确保即使文本字段是只读的，也会显示弹出窗口。
$('#txtStartDate').datetimepicker({
locale: "da",
format: "DD/MM/YYYY",
ignoreReadonly: true
});
$('#txtEndDate').datetimepicker({
locale: "da",
useCurrent: false,
format: "DD/MM/YYYY",
ignoreReadonly: true
});
});
回答by DaviD.K
@rene-pot is correct. You will however have a not-allowed sign on the desktop version of the website. Way around this, apply the readonly="true" to a div that will show up on the mobile view only and not on desktop. See what we did here http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/
@rene-pot 是正确的。但是，您将在网站的桌面版本上看到一个不允许的标志。解决这个问题的方法是，将 readonly="true" 应用于仅显示在移动视图上而不显示在桌面上的 div。看看我们在这里做了什么http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/
回答by Curtis
So here is my solution (similar to John Vance's answer):
所以这是我的解决方案（类似于约翰万斯的回答）：
First go here and get a function to detect mobile browsers.
首先去这里并获得一个检测移动浏览器的功能。
http://detectmobilebrowsers.com/
http://detectmobilebrowsers.com/
They have a lot of different ways to detect if you are on mobile, so find one that works with what you are using.
他们有很多不同的方法来检测您是否在使用移动设备，因此请找到一种适合您使用的设备。
Your HTML page (pseudo code):
您的 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
});
});
This way you can still use native date selectors in mobile while still setting the min and max dates either way.
通过这种方式，您仍然可以在移动设备中使用原生日期选择器，同时仍然可以设置最小和最大日期。
The field for non mobile should be read only because if a mobile browser like chrome for ios "requests desktop version" then they can get around the mobile check and you still want to prevent the keyboard from showing up.
非移动字段应该是只读的，因为如果像 ios 的 chrome 这样的移动浏览器“请求桌面版本”，那么他们可以绕过移动检查，而您仍然希望阻止键盘显示。
However if the field is read only it could look to a user like they cant change the field. You could fix this by changing the CSS to make it look like it isn't read only (ie change border-color to black) but unless you are changing the CSS for all input tags you will find it hard to keep the look consistent across browsers.
但是，如果该字段是只读的，它可能看起来像用户无法更改该字段。您可以通过更改 CSS 使其看起来不是只读的（即将边框颜色更改为黑色）来解决此问题，但除非您更改所有输入标签的 CSS，否则您会发现很难保持外观一致浏览器。
To get arround that I just add a calendar image button to the date picker. Just change your JQuery code a bit:
为了解决这个问题，我只是在日期选择器中添加了一个日历图像按钮。只需稍微更改您的 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"
});
});
Note: you will have to find a suitable image.
注意：您必须找到合适的图像。
