Question

我有一个字段，当用户点击它时会弹出日期控件。问题是，用户还可以输入无效日期。

有没有办法使用Javascript让字段可编辑，但阻止用户输入任何数字？

Answer 1

我认为你想要一个只读字段：

<input type="text" readonly="readonly" /＆GT;

它仍然可以使用javascript进行修改，您仍然可以截取点击事件，但用户无法输入或复制/粘贴或拖放到其中。

在这里演示：http://jsfiddle.net/jfriend00/9SsZq/

尝试拦截击键的选项可能无法阻止所有操作（例如拖放）。使用内置的只读功能更有意义。

Answer 2

您可以将keydown处理程序绑定到该文本字段并返回错误的数字：

$('#field_id').keydown(function(event){
  if(event.keyCode > 47 && event.keyCode < 59)
    return false;
  return true;
});

如果你还想阻止ctrl-v和上下文菜单（能够从中粘贴）使用

$('#field_id').keydown(function(event){
  var k = event.keyCode;
  if((k > 47 && k < 59) || (k == '86' && event.ctrlKey))
    return false;
  return true;
}).bind('contextmenu',function(e){
  return false;
});

对于linux，您还应该考虑阻止中间点击粘贴：）

Answer 3

更新忽略我的回答并使用widely supported readonly属性@jfriend00提及。

<强>原始

您可以尝试阻止keydown的默认操作，但用户仍然可以粘贴（或找到其他“聪明”方法将不需要的数据输入其中）。

$('input[type="text"]').keydown(function(e) {
  e.preventDefault();
}
.change(function() {
  // Put default value back in
  // NOTE: this only fires when focus is lost
});

更好的选择可能是使用disabled属性并使用CSS将其设为look right。

<input type="text" class="looks-enabled" disabled="disabled" />

使用JQuery，如何使字段可编辑，但用户无法输入？

3 个答案: