使用bootstrap-datepicker时如何显示移动键盘？ [英] How to not show a mobile keyboard when using bootstrap-datepicker?

问题描述

我尝试设置 disableTouchKeyboard 选项，但它什么也没做 - 至少在iOS / Safari上。我特别使用的选项是：

I tried setting the disableTouchKeyboard option but it did nothing -- at least on iOS/Safari. The options I was specifically using were:

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

推荐答案

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

This is how I've accomplished this but I'd love to know if there are better ways.

在问题中使用相同的选项，然后我还通过在HTML中执行此操作，使HTML文本框 readonly

Using the same options in the question, I then also made the HTML text box readonly by doing this in my HTML:

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

这似乎工作，JavaScript仍然可以改变场。然而，它确实使文本框的背景灰色（即禁用），并将鼠标指针改为交叉圆圈图标（不允许），这是不需要的。为了解决这个问题，我添加了一个内联样式：

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:

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

我试图覆盖游标和CSS中使用 background-color （使用！important ），但在Internet Explorer中似乎不起作用。

I tried to override the cursor and background-color in CSS (using !important) but that didn't seem to work in 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.

这篇关于使用bootstrap-datepicker时如何显示移动键盘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！