在聚焦<input>时防止iphone默认键盘

Question

这就是我的尝试方式

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

但输入仍然是'推出'iphone的键盘

ps:我想这样做,因为我使用datepicker插件作为日期

Answer 1

通过将输入字段设置为readonly您应该阻止任何人在其中键入任何内容,但仍然可以在其上启动单击事件.

当您使用日期/时间选择器时,这在非移动设备中也很有用

Answer 2

输入模式属性

<input inputmode='none'>

在inputmode全局属性是一个枚举属性，在可能的同时用户编辑元素或其内容输入数据的类型提示。它可以具有以下值：

none- 没有虚拟键盘。当页面实现自己的键盘输入控件时。

我正在成功使用它（在Chrome/Android上测试）

CSS-Tricks：关于输入模式你想知道的一切

Answer 3

您可以向DatePicker添加回调函数,以告知它在显示DatePicker之前模糊输入字段.

$('.selector').datepicker({
   beforeShow: function(){$('input').blur();}
});

注意:iOS键盘将出现几分之一秒然后隐藏.

Answer 4

我在这里问了一个类似的问题并得到了一个很棒的答案 - 使用iPhone本机日期选择器 - 它很棒.

如何为网页上的指定输入字段关闭iPhone键盘

概要/伪代码:

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();

将字段类型动态设置为"date"的原因是Opera将弹出其自己的本机日期选择器,我假设您希望在桌面浏览器上一致地显示日期选择器.