blocks|key|766875|text|通过向输入字段添加属性readonly+(或readonly="readonly")，您应该可以防止任何人在其中键入任何内容，但仍然可以在该字段上启动单击事件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|766876|这在非移动设备中也很有用，因为您使用日期/时间选择器|766877|entityMap^0|B|8|M|J|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

By adding the attribute <code>readonly</code> (or <code>readonly="readonly"</code>) to the input field you should prevent anyone typing anything in it, but still be able to launch a click event on it.

This is also usefull in non-mobile devices as you use a date/time picker

blocks|key|550203|text|您可以向DatePicker添加一个回调函数，告诉它在显示DatePicker之前模糊输入字段。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|550204|$('.selector').datepicker({
+++beforeShow:+function(){$('input').blur();}
});|code-block|syntax|javascript|550205|注:+iOS键盘将显示不到一秒钟，然后隐藏。|550206|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can add a callback function to your DatePicker to tell it to blur the input field before showing the DatePicker.

<pre><code>$('.selector').datepicker({
 beforeShow: function(){$('input').blur();}
});
</code></pre>

Note: The iOS keyboard will appear for a fraction of a second and then hide.

blocks|key|767140|text|下面的代码适用于我：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|767141|<input+id="myDatePicker"+class="readonlyjm"/>


$('#myDatePicker').datepicker({
/*+options+*/
});

$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});|code-block|syntax|javascript|767142|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Below code works for me:

<pre><code>&lt;input id="myDatePicker" class="readonlyjm"/&gt;


$('#myDatePicker').datepicker({
/* options */
});

$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});
</code></pre>

blocks|key|766967|text|因为我不能对顶部的评论发表评论，所以我不得不提交一个“答案”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|766968|所选答案的问题在于，将该字段设置为只读会使该字段脱离iPhone上的Tab键顺序。因此，如果你喜欢通过点击“下一步”来输入表单，你可以直接跳过这个字段。|766969|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

blocks|key|767027|text|我在这里问了一个类似的问题，得到了一个很棒的答案--使用iPhone原生datepicker+--太棒了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|767028|How+to+turn+off+iPhone+keypad+for+a+specified+input+field+on+web+page|offset|length|767029|摘要/伪代码：|767030|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();|code-block|syntax|javascript|767031|动态设置字段类型为"date“的原因是Opera将弹出它自己的原生日期选择器，我假设您希望在桌面浏览器上一致地显示日期选择器。|767032|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/9812083/how-to-turn-off-iphone-keypad-for-a-specified-input-field-on-web-page^0|0|0|1X|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I asked a similar question here and got a fantastic answer - use the iPhone native datepicker - it's great.

<a href="https://stackoverflow.com/questions/9812083/how-to-turn-off-iphone-keypad-for-a-specified-input-field-on-web-page">How to turn off iPhone keypad for a specified input field on web page</a>

Synopsis / pseudo-code:

<pre><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();
</code></pre>

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.

blocks|key|767219|text|根据我的观点，解决这个问题的最好方法是使用"ignoreReadonly“。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|767220|首先，将输入字段设为只读，然后添加ignoreReadonly:true。这将确保即使文本字段是只读的，弹出窗口也会显示出来。|767221|$('#txtStartDate').datetimepicker({
++++++++++++locale:+"da",
++++++++++++format:+"DD/MM/YYYY",
++++++++++++ignoreReadonly:+true
++++++++});
++++++++$('#txtEndDate').datetimepicker({
++++++++++++locale:+"da",
++++++++++++useCurrent:+false,
++++++++++++format:+"DD/MM/YYYY",
++++++++++++ignoreReadonly:+true
++++++++});
});|code-block|syntax|javascript|767222|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Best way to solve this as per my opinion is Using "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.

<pre><code>$('#txtStartDate').datetimepicker({
 locale: "da",
 format: "DD/MM/YYYY",
 ignoreReadonly: true
 });
 $('#txtEndDate').datetimepicker({
 locale: "da",
 useCurrent: false,
 format: "DD/MM/YYYY",
 ignoreReadonly: true
 });
});
</code></pre>

blocks|key|550430|text|所以这是我的解决方案(类似于John+Vance的答案)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|550431|首先转到这里，获取一个检测移动浏览器的函数。|550432|http://detectmobilebrowsers.com/|offset|length|550433|他们有很多不同的方法来检测你是否在使用手机，所以找一种适合你使用的方法。|550434|您的HTML页面(伪代码)：|550435|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"+/>|code-block|syntax|javascript|550436|JQuery：|550437|$(+".date-picker"+).each(function()+{
++++var+min+=+$(+this+).attr("min");
++++var+max+=+$(+this+).attr("max");
++++$(+this+).datepicker({+
++++++++dateFormat:+"yy-mm-dd",++
++++++++minDate:+min,++
++++++++maxDate:+max++
++++});
});|550438|这样，你仍然可以在移动设备中使用原生日期选择器，同时仍然可以设置最小和最大日期。|550439|非移动端的字段应该是只读的，因为如果像ios的chrome这样的移动端浏览器“请求桌面版”，那么他们就可以绕过移动端的检查，而你仍然想阻止键盘出现。|550440|但是，如果该字段是只读的，则用户可能会认为他们无法更改该字段。你可以通过改变CSS使它看起来不是只读的(即把边框颜色改成黑色)来修复这个问题，但是除非你改变所有输入标签的CSS，否则你会发现很难在不同的浏览器上保持一致的外观。|550441|为了解决这个问题，我只需在日期选择器中添加一个日历图像按钮。只需稍微更改一下您的JQuery代码：|550442|$(+".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"
++++});
});|550443|注意:您必须找到合适的图像。|550444|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|W|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1E|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1F|8|@]|9|@$F|1G|G|1H|1|1I]]|A|$]]|$1|H|3|I|5|6|7|1J|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1K|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1L|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1M|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1N|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1O|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1P|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1R|8|@]|9|@]|A|$]]|$1|12|3|13|5|N|7|1S|8|@]|9|@]|A|$O|P]]|$1|14|3|15|5|6|7|1T|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]]|17|$18|$5|19|1A|1B|A|$1C|E]]]]

So here is my solution (similar to John Vance's answer):

First go here and get a function to detect mobile browsers. 

<a href="http://detectmobilebrowsers.com/" rel="nofollow">http://detectmobilebrowsers.com/</a>

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):

<pre><code>If Mobile Then
 &lt;input id="selling-date" type="date" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" /&gt;
else
 &lt;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" /&gt;
</code></pre>

JQuery:

<pre><code>$( ".date-picker" ).each(function() {
 var min = $( this ).attr("min");
 var max = $( this ).attr("max");
 $( this ).datepicker({ 
 dateFormat: "yy-mm-dd", 
 minDate: min, 
 maxDate: max 
 });
});
</code></pre>

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.

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.

To get arround that I just add a calendar image button to the date picker. Just change your JQuery code a bit:

<pre><code>$( ".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"
 });
});
</code></pre>

Note: you will have to find a suitable image.

blocks|key|550593|text|我有一个小的通用“无键盘”脚本-适用于我的安卓和iPhone：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|550594|++$('.readonlyJim').on('focus',+function+()+{
++++++$(this).trigger('blur')
++})|code-block|syntax|javascript|550595|只需将add类readonlyJim附加到输入标记，就可以了。|offset|length|style|CODE|550596|(*很抱歉这里有太多的StarTrek+)|550597|entityMap^0|0|0|7|B|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I have a little generic "no keyboard" script - works for me with Android and iPhone:

<pre><code> $('.readonlyJim').on('focus', function () {
 $(this).trigger('blur')
 })
</code></pre>

Simply attach add class <code>readonlyJim</code> to the input tag and voila.

(*Sorry too much StarTrek here)

this is how i'm trying

<pre><code>&lt;script type="text/javascript"&gt;
 $(document).ready(function(){
 $('#dateIn,#dateOut').click(function(e){
 e.preventDefault();
 }); 
 });
&lt;/script&gt;
</code></pre>

but the input stills 'launching' iphone's keyboard

ps: i want to do this because i'm using datepicker plugin for date

prevent iphone default keyboard when focusing an <input>

这就是我想要做的<script type="text/javascript"> $(document).ready(function(){ $('#dateIn,#dateOut').click(function(e){ e.preventDefault(); }); });</script>但输入仍在“启动”iphone的键盘p

问在聚焦<input>时防止使用iphone默认键盘
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在聚焦<input>时防止使用iphone默认键盘EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在聚焦<input>时防止使用iphone默认键盘
EN