twitter-bootstrap 使用 bootstrap-datepicker 时如何不显示移动键盘？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29591956/
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
How to not show a mobile keyboard when using bootstrap-datepicker?
提问by GusP
I tried setting the disableTouchKeyboardoption but it did nothing -- at least on iOS/Safari. The options I was specifically using were:
我尝试设置该disableTouchKeyboard选项，但它什么也没做——至少在 iOS/Safari 上。我特别使用的选项是：
$(".datepicker").datepicker({
autoclose: true,
disableTouchKeyboard: true,
format: 'm/d/yyyy',
startDate: '01/01/1900',
todayBtn: 'linked',
todayHighlight: true,
});
Anyone know what the best way to do this is?
有谁知道这样做的最佳方法是什么？
采纳答案by GusP
This is how I've accomplished this but I'd love to know if there are better ways.
这就是我完成的方式，但我很想知道是否有更好的方法。
Using the same options in the question, I then also made the HTML text box readonlyby doing this in my HTML:
在问题中使用相同的选项，然后我还readonly通过在我的 HTML中执行此操作来制作 HTML 文本框：
@Html.EditorFor(model => model.Date, new { htmlAttributes = new {
@class = "form-control datepicker", @readonly = "true",
}})
This seems to work as JavaScript can still change the value of the field. However, it does make the background of the text box gray (i.e., disabled) and it changes the mouse pointer to the crossed circle icon (not-allowed) which is not desired. To get around that I did this added an inline style:
这似乎有效，因为 JavaScript 仍然可以更改字段的值。但是，它确实使文本框的背景变灰（即，禁用），并将鼠标指针更改not-allowed为不需要的交叉圆圈图标 ( )。为了解决这个问题，我添加了一个内联样式：
@Html.EditorFor(model => model.Date, new { htmlAttributes = new {
@class = "form-control datepicker", @readonly = "true",
style = "cursor: default; background-color: #fff"
}})
I tried to override the cursorand background-colorin CSS (using !important) but that didn't seem to work in Internet Explorer.
我试图覆盖CSS 中的cursor和background-color（使用!important），但这在 Internet Explorer 中似乎不起作用。
This isn't pretty but it works for me. Still need to see how I could do this in a more robust way (e.g., no hard coding the background color, not having to specify this on all of my date fields, etc.). If anyone knows a better way, I'd very much appreciate it.
这不漂亮，但对我有用。仍然需要看看我如何以更健壮的方式做到这一点（例如，没有对背景颜色进行硬编码，不必在我的所有日期字段上指定这一点，等等）。如果有人知道更好的方法，我将不胜感激。
回答by Philip Enc
If you are using Bootstrap3 Datepicker:
https://eonasdan.github.io/bootstrap-datetimepicker
如果您使用 Bootstrap3 Datepicker：https://eonasdan.github.io/bootstrap-datetimepicker
Just add this property to the input: readonly="readonly"
and this property
to options when instantiate the library.
只需将此属性添加到输入： readonly="readonly" 并将此属性添加
到实例化库时的选项。
$('#datetimepicker1').datetimepicker({
useCurrent: false,
daysOfWeekDisabled: [0, 6],
format: 'DD-MM-YYYY',
ignoreReadonly: true <------ this property
});
Tested on Safari iPhone and Chrome / Native browser Android.
在 Safari iPhone 和 Chrome/Android 原生浏览器上测试。
回答by Paul M
I have/had a similar problem like this.
我有/遇到过类似的问题。
I use a input field type=textwhere i bind a jQuery datepicker to it. When I select the input field on my mobile (android chrome) I get the datepicker and the keyboard of the phone.
我使用一个输入字段type=text，我将一个 jQuery 日期选择器绑定到它。当我在我的手机（android chrome）上选择输入字段时，我会得到日期选择器和手机的键盘。
After searching StackOverflow I found some solutions about setting the input field on readonly or disabling the field. The problem with this is when you disable the field it will not be submitted, and when read-only is set my jQuery validator skips the field. So I needed a different solution.
在搜索 StackOverflow 后，我找到了一些关于将输入字段设置为只读或禁用该字段的解决方案。问题是当您禁用该字段时，它不会被提交，而当设置为只读时，我的 jQuery 验证器会跳过该字段。所以我需要一个不同的解决方案。
I have now fixed it by letting the datepicker set the field on read only before opening the picker, and removing the readonly when the picker is closed. I have tested it so far on mobile android (chrome and I.E) and i dont get the native keyboard. iphone/ipad is not tested yet but maybe other can check it.
我现在通过让日期选择器在打开选择器之前将字段设置为只读来修复它，并在选择器关闭时删除只读。到目前为止，我已经在移动 android（chrome 和 IE）上对其进行了测试，但没有获得本机键盘。iphone/ipad 尚未测试，但也许其他人可以检查它。
The code is:
代码是：
$(this).datepicker({
beforeShow: function(input, obj){$(input).prop('readonly', 'readonly');},
onClose: function () {$(this).prop('readonly', false);}});
回答by Chenthil
Just also add attribute readonlyin datepicker.
只需readonly在日期选择器中添加属性。
$(".datepicker").datepicker({
format: "dd-M-yyyy",
autoclose: true,
disableTouchKeyboard: true,
Readonly: true
}).attr("readonly", "readonly");
回答by Amrit
This is an old question but I thought I should share my solution since this question shows up in Google search. If you make the input type a button the keyboard will not show up and you can style the button to look like a text input field if you really need to.
这是一个老问题，但我认为我应该分享我的解决方案，因为这个问题出现在 Google 搜索中。如果您将输入类型设为按钮，则键盘将不会显示，如果您确实需要，您可以将按钮的样式设置为看起来像文本输入字段。
<input type="button" style="background-color:white;border:1px solid #DDD;padding:5px;cursor:text;" value="Enter a Date" id="datepicker">
回答by Azmi Adhani
This quick block of Javascript will allow you to disable keyboard input within Date fields. This snippet is helpful if you need to avoid the virtual keyboard from appearing within the datepicker.
这个 Javascript 快速块将允许您禁用日期字段中的键盘输入。如果您需要避免虚拟键盘出现在日期选择器中，此代码段会很有帮助。
<script type="text/javascript">
jQuery(function() {
jQuery( ".datepicker" ).datepicker({ }).attr('readonly','readonly');
});
</script>