带有文本输入的jQuery Datepicker,不允许用户输入

Question

如何将jQuery Datepicker与文本框输入一起使用:

$("#my_txtbox").datepicker({
  // options
});

这不允许用户在文本框中输入随机文本.我希望当文本框获得焦点或用户点击它时弹出Datepicker,但我希望文本框忽略使用键盘的任何用户输入(复制和粘贴,或任何其他).我想从Datepicker日历中专门填充文本框.

这可能吗？

jQuery 1.2.6
Datepicker 1.5.2

Answer 1

您应该能够在文本输入上使用readonly属性,jQuery仍然可以编辑其内容.

<input type='text' id='foo' readonly='true'>

对于禁用了Javascript的人,我会将输入字段单独留在HTML中,并让jQuery的位置将readonly属性放在页面上加载$(document).ready(function(){$("#my_txtbox").attr 'readOnly','true'); }); 这样,关闭JS的用户仍然可以选择日期 (30认同)
这很棒..但Chrome(以及可能的其他浏览器)添加到readonly属性的默认样式真的很不愉快,所以一定要覆盖它 (6认同)
我使用光标指针使其看起来可点击`<input ... readonly ="readonly"style ="cursor:pointer; background-color:#FFFFFF">` (5认同)
根据WC3 HTML规范,它只有<input readonly>或<input readonly ="readonly">没有true/false https://www.w3.org/TR/html5/forms.html#the-readonly-attribute (2认同)

Answer 2

根据我的经验,我会推荐Adhip Gupta建议的解决方案:

$("#my_txtbox").attr( 'readOnly' , 'true' );

下面的代码不会让用户类型的新角色,但将允许他们删除字符:

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

此外,这将使表单对禁用JavaScript的用户无效:

<input type="text" readonly="true" />

什么并行宇宙人使用常规网站与禁用的JavaScript？ (7认同)
由于JavaScript禁用方案,OP应考虑将此标记为答案. (3认同)
在撰写本文时,这是使用jQuery设置readonly属性的首选方法:`$("#my_txtbox").prop('readonly',true)`; (2认同)

Answer 3

尝试

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

Answer 4

如果您在多个地方重复使用日期选择器,那么通过使用类似的东西也很容易通过JavaScript修改文本框:

$("#my_txtbox").attr( 'readOnly' , 'true' );

在您初始化日期选择器的地方之前/之后.

Answer 5

<input type="text" readonly="true" />

导致文本框在回发后丢失其值.

你宁愿使用Brad8118的建议,这是完美的.

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

编辑:让IE工作使用'keydown'而不是'keypress'

Answer 6

初始化日期选择器后：

$(".project-date").datepicker({
    dateFormat: 'd M yy'
});

$(".project-date").keydown(false);