输入仅接受数字和短划线字符的文本字段

时间:2013-11-05 09:13:20

标签: javascript

我正在使用常用的Javascript函数,只允许将数字输入到文本字段中:

function isNumberKey(evt)
{
  var charCode = (evt.which) ? evt.which : event.keyCode;
  if (charCode != 46 && charCode > 31
    && (charCode < 48 || charCode > 57))
     return false;

  return true;
}

我称之为onkeypress,它可以防止显示任何数字。我正在尝试改变它,这样我就可以将短划线( - )放入文本字​​段中。短划线键码是189,所以我尝试了这个:

function isNumberKey(evt)
{
  var charCode = (evt.which) ? evt.which : event.keyCode;
  if (charCode != 46 && charCode != 189 && charCode > 31
    && (charCode < 48 || charCode > 57))
     return false;

  return true;
}

认为条件语句会接受短划线字符,但似乎不起作用。关于为什么会这样的任何想法?谢谢你的帮助!

6 个答案:

答案 0 :(得分:6)

如果您正在使用按键事件,则需要使用字符代码45作为短划线/连字符。

如果您正在使用keydown / keyup事件然后,您需要使用109 189来覆盖数字键盘中的减号键和(通常)位于P键上方。

if (charCode != 46 && charCode != 45 && charCode > 31
    && (charCode < 48 || charCode > 57))
     return false;

演示:http://jsfiddle.net/J6B7U/

如果您对哪个键代码有疑问,那么函数中的console.log(charCode);将帮助您调试。

(另请注意,捕获关键事件不足以防止输入无效数据,因为用户可能会使用浏览器的编辑菜单或拖放来更改字段。)

答案 1 :(得分:3)

试试这个

  function isNumberKey(evt)
  {
     var charCode = (evt.which) ? evt.which : event.keyCode
     if (charCode != 45  && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;

     return true;
  }

in html

<input type="text" onkeypress="return isNumberKey(event)">

答案 2 :(得分:0)

您想使用短划线的字符代码,即45,而不是键码。

答案 3 :(得分:0)

这不适用于移动设备。例如,当输入类型设置为"number"时,Android上的Chrome会调出数字小键盘而不是全键盘。您可以尝试使用input type="tel"代替。它允许数字0-9-()。它还会调出Android上的拨号盘。尚未在iPhone上测试过。

答案 4 :(得分:0)

此代码仅适用于数字类型

<input onkeypress="return isNumberKey(event);">
<script>
function isNumberKey(evt)
{
   var t = (evt.which) ? evt.which : event.keyCode;
     return !(t > 31 && (t < 48 || t > 57))
}
</script>

答案 5 :(得分:0)

这是在我询问时提出的,因此可能值得在此处添加 keyCodecharCode 已弃用,目前已弃用。

添加检查或实现也接受“-”字符的 isNumberKey 函数的更好方法可能是:

const isNumberKey = (event: KeyboardEvent) => 
   ((event.key.length > 1) || event.key.match(/^\d|-$/))

这样,我们检查允许特殊键执行其功能,同时确保按下单个字符键时只允许数字。

相关问题