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

fslejnso  于 2022-11-03  发布在  jQuery
关注(0)|答案(9)|浏览(148)

这就是我努力的方式

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

但输入仍然“启动”iPhone的键盘
ps:我想这样做,因为我正在使用日期选择器插件的日期

kmpatx3s

kmpatx3s1#

通过将属性readonly(或readonly="readonly")添加到输入字段中,您应该可以防止任何人在其中键入任何内容,但仍然可以在其中启动单击事件。
在使用日期/时间选取器时,这在非移动设备中也很有用

sg2wtvxw

sg2wtvxw2#

inputmode属性

<input inputmode='none'>

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

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

我正在成功地使用它(在 Chrome/Android 上测试)
CSS-Tricks: Everything You Ever Wanted to Know About inputmode

u0sqgete

u0sqgete3#

您可以将回调函数添加到DatePicker,以指示它在显示DatePicker之前模糊输入字段。

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

【注】iOS键盘会出现几分之一秒,然后隐藏。

xhv8bpkk

xhv8bpkk4#

下面的代码对我有用:

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

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

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

vhmi4jdf5#

我在这里问了一个类似的问题,得到了一个很棒的答案--使用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将弹出它自己的本地日期选择器,否则,我假设您希望在桌面浏览器上一致地显示日期选择器。

c8ib6hqw

c8ib6hqw6#

由于我不能评论顶部的评论,我被迫提交一个“答案”。
选择的答案的问题在于,将该字段设置为只读会使该字段在iPhone上不按Tab键顺序显示。因此,如果你喜欢通过点击“下一步”来输入表单,你可以直接跳过该字段。

q3qa4bjr

q3qa4bjr7#

根据我的意见,解决这个问题的最好方法是使用“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
        });
});
bvn4nwqk

bvn4nwqk8#

下面是我的解决方案(类似于约翰·万斯的答案):
首先到这里,并获得一个功能来检测移动的浏览器。
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  
    });
});

这样,您仍然可以在移动的中使用本机日期选择器,同时仍然可以设置最小和最大日期。
非移动的的字段应该是只读的,因为如果像chrome for ios这样的移动浏览器“请求桌面版本”,那么他们可以绕过移动检查,而你仍然希望阻止键盘显示。
但是,如果字段是只读的,用户可能会觉得无法更改该字段。您可以通过更改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"
    });
});

注意:您必须找到一个合适的图像。

vcudknz3

vcudknz39#

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

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

只需将add类readonlyJim附加到输入标记,就可以了。
(* 抱歉,这里有太多星际迷航)

相关问题