禁用 jQuery UI 日期选择器的焦点设置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6911895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable setting of focus for jQuery UI datepicker
提问by black666
There is an option with the jQuery UI datepicker to only open the datepicker when a button image is clicked. See the following for an example:
jQuery UI datepicker 有一个选项，可以仅在单击按钮图像时打开日期选择器。请参阅以下示例：
http://jqueryui.com/demos/datepicker/#icon-trigger
http://jqueryui.com/demos/datepicker/#icon-trigger
The problem is that the focus is in the textfield as soon as the datepicker opens. Is it possible to disable the setting of the focus?
问题是，只要日期选择器打开，焦点就在文本字段中。是否可以禁用焦点设置？
When using a page like the above on a mobile device like an iPhone, the keyboard pops up because the textfield gains the focus. This is not really userfriendly since you have to close the keyboard to actually get to the datepicker and use it...
在 iPhone 等移动设备上使用上述页面时，由于文本字段获得焦点，键盘会弹出。这不是真正的用户友好，因为您必须关闭键盘才能真正进入日期选择器并使用它......
回答by Michal Shulman
set input to ReadOnly
将输入设置为只读
<input type="text" id="datePicker" readonly>
回答by Anurag Joshi
Achieved the desired result by setting datepicker showOn option to "none".
通过将 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 );
}
});
The datepicker implementation understands "focus", "button" and "both" values for the showOn option. The default is set to "focus". So technically passing any value other than these 3 should work. A word of caution though, once the default functionality is overridden, the onus of managing proper display of the date picker calendar lies on you.
datepicker 实现理解 showOn 选项的“focus”、“button”和“both”值。默认设置为“焦点”。因此，从技术上讲，传递除这 3 个之外的任何值都应该有效。但请注意，一旦默认功能被覆盖，管理日期选择器日历的正确显示的责任就在于您。
回答by user981971
If you make the input disabled the keyboard never pops up. Like...
如果您禁用输入，则键盘永远不会弹出。喜欢...
<input type="text" id="date_picker_field" name="date" disabled/>
回答by Peter Bowers
This is an older question, but if you stumble on it looking for a solution to the same problem I believethe solution in modern browsers is to use inputmode="none"in the HTML input tag:
这是一个较旧的问题，但如果您偶然发现它正在寻找解决同一问题的方法，我相信现代浏览器中的解决方案是inputmode="none"在 HTML 输入标签中使用：
<input type="text" ... inputmode="none" />
I haven't tested it extensively, but it's worked well in Android with the setups I've used.
我还没有对它进行广泛的测试，但它在我使用过的设置下在 Android 中运行良好。
回答by Walt
I've been experiencing the same problem on an application I am working on. I commented out these lines from my jQuery file to prevent it from automatically setting focus on the textfield immediately after clicking on my calendar icon. It worked for my application.
我在我正在处理的应用程序上遇到了同样的问题。我从我的 jQuery 文件中注释掉了这些行，以防止它在单击我的日历图标后立即自动将焦点设置在文本字段上。它适用于我的应用程序。
if ( $.datepicker._shouldFocusInput( inst ) ) {
inst.input.focus();
}
回答by PiTheNumber
I had the minified version v1.11.4 and in jquery-ui.min.js I found two times
我有缩小版 v1.11.4 和 jquery-ui.min.js 我发现两次
datepicker._shouldFocusInput(t)&&t.input.focus()
datepicker._shouldFocusInput(t)&&t.input.focus()
I removed &&t.input.focus()and it works fine.
我删除了&&t.input.focus()，它工作正常。
Also of interest might be:
同样感兴趣的可能是：
_shouldFocusInput:function(e){
return e.input&&e.input.is(":visible")&&!e.input.is(":disabled")&&!e.input.is(":focus")
}
Still looking for a fix without changing core files...
仍在寻找不更改核心文件的修复程序......
回答by Danny C
If you are using jQuery Mobile-then you'll probably want to check out some the mobile oriented datepickers out there.
I am using the experimental jQueryUI mobile datepicker(from alpha 4) after trying out several of the others because we wanted a nice calendar view. It basically just adds a few css classes added on top of the existing datepicker. I am using the Editedversion so it works as a popup. To prevent the keypad opening I simply add a jQuery blur event $this.blur()right after it receives focus before the picker is shown. The blur event happens fast enough that the keyboard never opens.
如果您使用的是 jQuery Mobile，那么您可能想要查看一些面向移动设备的日期选择器。在尝试了其他几个之后，我正在使用实验性的jQueryUI 移动日期选择器（来自 alpha 4），因为我们想要一个漂亮的日历视图。它基本上只是在现有的日期选择器之上添加了一些 css 类。我使用的是Edited版本，因此它可以作为弹出窗口使用。为了防止键盘打开，我只需$this.blur()在显示选择器之前接收焦点后立即添加一个 jQuery 模糊事件。模糊事件发生得足够快，以至于键盘永远不会打开。
If not- You'll probably want to do the same thing. I'm not aware of a way to do it without editing the code though.
如果没有- 您可能想要做同样的事情。我不知道有什么方法可以在不编辑代码的情况下做到这一点。
回答by iamhonee
I experienced the same thing where keyboard / keypads pops up before I can pick a date while testing in mobile devices. I just added an attribute readonly="true" inside
在移动设备上进行测试时，我遇到了同样的事情，在我可以选择日期之前，键盘/小键盘会弹出。我刚刚在里面添加了一个属性 readonly="true"
However, be sure to edit CSS and specify cursor: pointer because it shows a question mark every time you hover in desktop view.
但是，请务必编辑 CSS 并指定 cursor: pointer，因为每次您将鼠标悬停在桌面视图中时，它都会显示一个问号。
回答by Bjoerg
I found a workaround by disabling the input field with jQuery before open the datepicker and enable it after a 100ms:
我找到了一种解决方法，即在打开日期选择器之前使用 jQuery 禁用输入字段并在 100 毫秒后启用它：
$selected = $("#datepickerInput");
$selected.prop('disabled', true);
$selected.datepicker("show");
window.setTimeout(function () {
$selected.prop('disabled', false);
}, 100);
Tested on Chrome and also with cordova on Android 5.1.1.
在 Chrome 和 Android 5.1.1 上的cordova 上测试。
回答by Mahendra Singh Yadav
$('#dateIniPick').datetimepicker({
format: 'DD/MM/YYYY',
ignoreReadonly: true,
allowInputToggle: true
});
