使用 bootstrap-datepicker 时如何不显示移动键盘？

Posted 2023-05-07

【中文标题】使用 bootstrap-datepicker 时如何不显示移动键盘？

【英文标题】：How to not show a mobile keyboard when using bootstrap-datepicker?

【发布时间】：2015-06-17 23:23:03

【问题描述】：

我尝试设置 disableTouchKeyboard 选项，但它什么也没做——至少在 ios/Safari 上是这样。我专门使用的选项是：

$(".datepicker").datepicker(
    autoclose: true,
    disableTouchKeyboard: true,
    format: 'm/d/yyyy',
    startDate: '01/01/1900',
    todayBtn: 'linked',
    todayHighlight: true,
);

有人知道最好的方法是什么吗？

【参考方案1】：

如果您使用的是 Bootstrap3 日期选择器：https://eonasdan.github.io/bootstrap-datetimepicker

只需将此属性添加到输入中：readonly="readonly" 以及此属性实例化库时的选项。

$('#datetimepicker1').datetimepicker(
        useCurrent: false,
        daysOfWeekDisabled: [0, 6],
        format: 'DD-MM-YYYY',
        ignoreReadonly: true   <------ this property
);

在 Safari iPhone 和 Chrome / 原生浏览器 android 上测试。

【参考方案2】：

这就是我做到这一点的方法，但我很想知道是否有更好的方法。

使用问题中的相同选项，然后我还在我的 html 中创建了 HTML 文本框 readonly：

@Html.EditorFor(model => model.Date, new  htmlAttributes = new  
    @class = "form-control datepicker", @readonly = "true",
)

这似乎可行，因为 javascript 仍然可以更改字段的值。但是，它确实使文本框的背景变为灰色（即禁用），并将鼠标指针更改为不需要的交叉圆圈图标 (not-allowed)。为了解决这个问题，我添加了一个内联样式：

@Html.EditorFor(model => model.Date, new  htmlAttributes = new  
    @class = "form-control datepicker", @readonly = "true",
    style = "cursor: default; background-color: #fff"
)

我试图覆盖 CSS 中的 cursor 和 background-color（使用 !important），但这在 Internet Explorer 中似乎不起作用。

这并不漂亮，但它对我有用。仍然需要看看我如何以更强大的方式做到这一点（例如，没有硬编码背景颜色，不必在我的所有日​​期字段上指定它等）。如果有人知道更好的方法，我将非常感激。

【讨论】：

你为什么使用new htmlAttributes = new ... ？我通常只使用new ... 。这一定很糟糕吗？

【参考方案3】：

我有/遇到过类似的问题。

我使用输入字段type=text 将jQuery datepicker 绑定到它。当我在手机（android chrome）上选择输入字段时，我得到了日期选择器和手机键盘。

在搜索 *** 后，我找到了一些关于将输入字段设置为只读或禁用该字段的解决方案。问题是当您禁用该字段时，它将不会被提交，并且当设置为只读时，我的 jQuery 验证器会跳过该字段。所以我需要一个不同的解决方案。

我现在通过让日期选择器在打开选择器之前将字段设置为只读，并在选择器关闭时删除只读来修复它。到目前为止，我已经在移动 android（chrome 和 I.E）上对其进行了测试，但我没有得到本机键盘。 iphone/ipad 尚未测试，但也许其他人可以检查它。

代码是：

$(this).datepicker(
beforeShow: function(input, obj)$(input).prop('readonly', 'readonly');,
onClose: function () $(this).prop('readonly', false););

【参考方案4】：

只需在日期选择器中添加属性readonly。

$(".datepicker").datepicker(
    format: "dd-M-yyyy",
    autoclose: true,
    disableTouchKeyboard: true,
    Readonly: true
).attr("readonly", "readonly");

【参考方案5】：

这是一个老问题，但我认为我应该分享我的解决方案，因为这个问题出现在 Google 搜索中。如果您将输入类型设置为按钮，则键盘将不会显示，如果您确实需要，您可以将按钮设置为看起来像文本输入字段。

<input type="button" style="background-color:white;border:1px solid #DDD;padding:5px;cursor:text;" value="Enter a Date" id="datepicker">

【参考方案6】：

这个快速的 Javascript 块将允许您在日期字段中禁用键盘输入。如果您需要避免虚拟键盘出现在日期选择器中，这个 sn-p 很有帮助。

<script type="text/javascript">
    jQuery(function() 
         jQuery( ".datepicker" ).datepicker( ).attr('readonly','readonly');
    );
</script>