聚焦时防止移动默认键盘<input>从显示

Question

这就是我正在尝试的方式

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

但输入仍然“启动”iphone的键盘

ps：我想这样做是因为我正在使用 datepicker 插件来获取日期

Answer 1

通过将属性readonly （或readonly="readonly" ）添加到输入字段，您应该防止任何人在其中输入任何内容，但仍然能够在其上启动单击事件。

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

Answer 2

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

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

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

Answer 3

输入模式属性

<input inputmode='none'>

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

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

---

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

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

Answer 4

下面的代码对我有用：

<input id="myDatePicker" class="readonlyjm"/>


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

$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});

Answer 5

由于我无法对最高评论发表评论，因此我被迫提交了“答案”。

所选答案的问题在于将字段设置为只读会使该字段脱离 iPhone 上的 Tab 键顺序。 因此，如果您喜欢通过点击“下一步”来输入表单，您将直接跳过该字段。

Answer 6

我在这里问了一个类似的问题并得到了一个很好的答案 - 使用 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();

将字段类型动态设置为“日期”的原因是，否则 Opera 将弹出自己的原生日期选择器，我假设您希望在桌面浏览器上一致地显示日期选择器。

Answer 7

我认为解决此问题的最佳方法是使用“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
        });
});

Answer 8

所以这是我的解决方案（类似于约翰万斯的回答）：

首先去这里并获得一个检测移动浏览器的功能。

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" />

查询：

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

通过这种方式，您仍然可以在移动设备中使用原生日期选择器，同时仍然可以设置最小和最大日期。

非移动字段应该是只读的，因为如果像 ios 的 chrome 这样的移动浏览器“请求桌面版本”，那么他们可以绕过移动检查，而您仍然希望阻止键盘显示。

但是，如果该字段是只读的，它可能看起来像用户无法更改该字段。 您可以通过更改 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"
    });
});

注意：您必须找到合适的图像。

Answer 9

@rene-pot 是正确的。 但是，您将在网站的桌面版本上看到一个不允许的标志。 解决这个问题的方法是，将 readonly="true" 应用于仅显示在移动视图上而不显示在桌面上的 div。 看看我们在这里做了什么http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/

Answer 10

我有一个通用的“无键盘”脚本 - 适用于 Android 和 iPhone：

  $('.readonlyJim').on('focus', function () {
      $(this).trigger('blur')
  })

只需将添加类readonlyJim附加到输入标签，瞧。

（*抱歉太多星际迷航了）