inputmode属性

Question

这就是我正在尝试的方式

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

但输入仍然是'启动'iphone的键盘

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

Answer 1

通过将输入字段设置为readonly="true"，您应该阻止任何人输入任何内容，但仍然可以在其上启动点击事件。

当您使用日期/时间选择器

时，这在非移动设备中也很有用

Answer 2

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

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

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

Answer 3

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

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

Answer 4

由于我无法评论最高评论，我不得不提交“答案”。

所选答案的问题在于，将字段设置为只读取字段超出iPhone上的Tab键顺序。因此，如果您想通过点击“下一步”来输入表单，那么您将跳过该字段。

Answer 5

以下代码适用于我：

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


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

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

Answer 6

所以这是我的解决方案（类似于John Vance的回答）：

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

JLS - Chapter 3. Lexical Structure

他们有很多不同的方法来检测你是否在移动设备上，所以找一个适合你所用的方法。

您的HTML页面（伪代码）：

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

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"
    });
});

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

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

但是，如果该字段是只读的，则可能会向用户表示他们无法更改字段。您可以通过更改CSS来使其看起来不是只读（即将border-color更改为黑色）来修复此问题，但除非您要更改所有输入标记的CSS，否则很难保持外观的一致性浏览器。

要获得arround，我只需将日历图像按钮添加到日期选择器。只需更改您的JQuery代码：

player.nationality = dataset_row.player_nationality.present? ? dataset_row.player_nationality : 'US'

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

Answer 7

根据我的观点解决这个问题的最佳方法是使用＆＃34; ignoreReadonly＆＃34;。

首先使输入字段只读，然后添加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

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

Answer 9

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

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

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

（*对不起这里的StarTrek）

Answer 10

inputmode属性

<input inputmode='none'>

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

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

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

CSS-Tricks: Everything You Ever Wanted to Know About inputmode

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

10 个答案:

inputmode属性