禁用jQuery UI datepicker的焦点设置

Posted 2021-05-06

jQuery UI datepicker有一个选项，只在单击按钮图像时打开日期选择器。请参阅以下示例：

http://jqueryui.com/demos/datepicker/#icon-trigger

问题是，一旦datepicker打开，焦点就在文本字段中。是否可以禁用焦点设置？

在像iPhone这样的移动设备上使用上述页面时，键盘会弹出，因为文本字段会获得焦点。这不是真正的用户友好，因为您必须关闭键盘才能真正到达日期选择器并使用它...

答案

将输入设置为ReadOnly

<input type="text" id="datePicker" readonly>

另一答案

$('#dateIniPick').datetimepicker({
    format: 'DD/MM/YYYY',
    ignoreReadonly: true,
    allowInputToggle: true
});

另一答案

如果禁用输入，键盘永远不会弹出。喜欢...

    <input type="text" id="date_picker_field" name="date" disabled/>

另一答案

如果您正在使用jQuery Mobile-那么您可能想要查看一些面向移动的日期选择器。在尝试了其他几个之后，我正在使用实验性的jQueryUI mobile datepicker（来自alpha 4），因为我们想要一个漂亮的日历视图。它基本上只是在现有的datepicker之上添加了一些css类。我正在使用Edited版本，因此它可以作为弹出窗口。为了防止键盘打开，我只需在显示选择器之前接收焦点后立即添加jQuery模糊事件$this.blur()。模糊事件发生得足够快，键盘永远不会打开。

如果不是 - 你可能想要做同样的事情。我不知道如何在不编辑代码的情况下做到这一点。

另一答案

我在使用的应用程序上遇到了同样的问题。我从我的jQuery文件中注释掉了这些行，以防止它在点击我的日历图标后立即自动将焦点设置在文本字段上。它适用于我的应用程序。

if ( $.datepicker._shouldFocusInput( inst ) ) {
    inst.input.focus();
}

另一答案

我有缩小版本v1.11.4和jquery-ui.min.js我发现了两次

datepicker._shouldFocusInput(t)&&t.input.focus()

我删除了&&t.input.focus()，它工作正常。

同样感兴趣的可能是：

_shouldFocusInput:function(e){
  return e.input&&e.input.is(":visible")&&!e.input.is(":disabled")&&!e.input.is(":focus")
}

仍在寻找修复而不更改核心文件...

另一答案

通过将datepicker showOn选项设置为“none”来实现所需的结果。

$(#startdate").datepicker({
    defaultDate : "+7d",
    minDate: "+7d",
    changeMonth : true,
    changeYear : true,
    yearRange : "c:c+1",
    numberOfMonths : 1,
    showOn: "none",
    dateFormat : "dd-MM-yy",
    onClose : function(selectedDate) {
        $("#startdate").val(selectedDate);
        $( "#enddate" ).datepicker( "option", "minDate", selectedDate );
    }
});

datepicker实现了解showOn选项的“焦点”，“按钮”和“两个”值。默认设置为“焦点”。因此，技术上传递除了这3之外的任何其他值都应该有效。但需要注意的是，一旦默认功能被覆盖，管理日期选择器日历的正确显示的责任在于您。

另一答案

我在使用移动设备进行测试时选择日期之前，我遇到了弹出键盘/键盘的问题。我刚刚在里面添加了一个readonly =“true”属性

但是，请务必编辑CSS并指定cursor：pointer，因为每次将鼠标悬停在桌面视图中时都会显示问号。

另一答案

我在打开datepicker之前通过使用jQuery禁用输入字段找到了一种解决方法，并在100ms后启用它：

$selected = $("#datepickerInput");
$selected.prop('disabled', true);
$selected.datepicker("show");
window.setTimeout(function () {
   $selected.prop('disabled', false);
}, 100);

在Chrome 5.1.1上测试Chrome和cordova。

另一答案

这是一个较老的问题，但如果您偶然发现它寻找同一问题的解决方案，我相信现代浏览器中的解决方案是在html输入标记中使用inputmode="none"：

<input type="text" ... inputmode="none" />

我没有对它进行过广泛的测试，但它在我使用的设置中在android中运行良好。