仅允许表单字段中的数字或小数点

时间:2021-07-29 17:07:27

I've limited the input field to only numbers through js but am not sure how to also allow decimals...

我已经将输入字段限制为仅通过js的数字,但我不确定如何也允许小数...

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

         return true;
      }

Thank you in advance!

先谢谢你!

Answer:

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

 return true;
 }

Adding the charCode 46 worked perfectly (keypress value). 190 and 110 did nothing.

添加charCode 46完美地工作(按键值)。 190和110什么也没做。

Thanks for your help all!

谢谢你的帮助!

3 个解决方案

#1


8  

Codes depend on which event you're listening to, an easy way to find what you want is by using the JavaScript Event KeyCode Test Page here with test input, e.g. for a full stop (the . left of right shift) you have

代码取决于您正在收听的事件,通过此处使用带有测试输入的JavaScript事件KeyCode测试页,可以轻松找到您想要的内容。你有一个句号(右移的左边)

               onKeyDown    onKeyPress    onKeyUp
event.keyCode        190            46        190
event.charCode         0            46          0
event.which          190            46        190

and for the . on the numeric pad it is

并为。它在数字键盘上

               onKeyDown    onKeyPress    onKeyUp
event.keyCode        110            46        110
event.charCode         0            46          0
event.which          110            46        110

As you can see, it is most uniform to check with onKeyPress with charCode which is it's unicode number; String.fromCharCode(46); // ".".

正如您所看到的,使用charCode检查onKeyPress是最统一的,这是它的unicode号码;使用String.fromCharCode(46); //“。”

There is a full list on the MDN page for KeyboardEvent where it is also stated

KeyboardEvent的MDN页面上有一个完整列表,其中也有说明

Note: Web developers shouldn't use keycode attribute of printable keys in keydown and keyup event handlers. As described above, keycode is not usable for checking character which will be inputted especially when Shift key or AltGr key is pressed. When web developers implement shortcut key handler, keypress event is better event for that purpose on Gecko at least. See Gecko Keypress Event for the detail.

注意:Web开发人员不应在keydown和keyup事件处理程序中使用可打印键的keycode属性。如上所述,键码不可用于检查将被输入的字符,特别是当按下Shift键或AltGr键时。当Web开发人员实现快捷键处理程序时,keypress事件至少是Gecko上用于此目的的更好事件。有关详细信息,请参阅Gecko Keypress事件。

You can observe the strange effects of using AltGr or Shift on keyCode with the key of choice in the test page I linked to as well.

您可以在我链接到的测试页面中观察使用AltCr或Shift on keyCode与选择键的奇怪效果。

#2


0  

Assuming you're using on key down or up:

假设您正在使用按键或向上按键:

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

     return true;
  }

110 is decimal point, 190 is period

110是小数点,190是小数点

http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Heres a fiddle with some test cases

下面是一些测试用例的小提琴

#3


0  

With HTML5, the input element got a new attribute: pattern. You can specify a regular expression that is validated by the browser before submitting the form.

使用HTML5,input元素获得了一个新属性:pattern。您可以在提交表单之前指定由浏览器验证的正则表达式。

<input type="text" pattern="([0-9]+\.)?[0-9]+" />

It is not widely supported yet, though.

但是,它尚未获得广泛支持。

The pattern attribute is supported in Internet Explorer 10, Firefox, Opera, and Chrome. (w3schools)

Internet Explorer 10,Firefox,Opera和Chrome支持pattern属性。 (W3Schools的)

Disclaimer: the expression is weak, go build a better one :)

免责声明:表达力弱,去建立一个更好的:)

#1


8  

Codes depend on which event you're listening to, an easy way to find what you want is by using the JavaScript Event KeyCode Test Page here with test input, e.g. for a full stop (the . left of right shift) you have

代码取决于您正在收听的事件,通过此处使用带有测试输入的JavaScript事件KeyCode测试页,可以轻松找到您想要的内容。你有一个句号(右移的左边)

               onKeyDown    onKeyPress    onKeyUp
event.keyCode        190            46        190
event.charCode         0            46          0
event.which          190            46        190

and for the . on the numeric pad it is

并为。它在数字键盘上

               onKeyDown    onKeyPress    onKeyUp
event.keyCode        110            46        110
event.charCode         0            46          0
event.which          110            46        110

As you can see, it is most uniform to check with onKeyPress with charCode which is it's unicode number; String.fromCharCode(46); // ".".

正如您所看到的,使用charCode检查onKeyPress是最统一的,这是它的unicode号码;使用String.fromCharCode(46); //“。”

There is a full list on the MDN page for KeyboardEvent where it is also stated

KeyboardEvent的MDN页面上有一个完整列表,其中也有说明

Note: Web developers shouldn't use keycode attribute of printable keys in keydown and keyup event handlers. As described above, keycode is not usable for checking character which will be inputted especially when Shift key or AltGr key is pressed. When web developers implement shortcut key handler, keypress event is better event for that purpose on Gecko at least. See Gecko Keypress Event for the detail.

注意:Web开发人员不应在keydown和keyup事件处理程序中使用可打印键的keycode属性。如上所述,键码不可用于检查将被输入的字符,特别是当按下Shift键或AltGr键时。当Web开发人员实现快捷键处理程序时,keypress事件至少是Gecko上用于此目的的更好事件。有关详细信息,请参阅Gecko Keypress事件。

You can observe the strange effects of using AltGr or Shift on keyCode with the key of choice in the test page I linked to as well.

您可以在我链接到的测试页面中观察使用AltCr或Shift on keyCode与选择键的奇怪效果。

#2


0  

Assuming you're using on key down or up:

假设您正在使用按键或向上按键:

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

     return true;
  }

110 is decimal point, 190 is period

110是小数点,190是小数点

http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Heres a fiddle with some test cases

下面是一些测试用例的小提琴

#3


0  

With HTML5, the input element got a new attribute: pattern. You can specify a regular expression that is validated by the browser before submitting the form.

使用HTML5,input元素获得了一个新属性:pattern。您可以在提交表单之前指定由浏览器验证的正则表达式。

<input type="text" pattern="([0-9]+\.)?[0-9]+" />

It is not widely supported yet, though.

但是,它尚未获得广泛支持。

The pattern attribute is supported in Internet Explorer 10, Firefox, Opera, and Chrome. (w3schools)

Internet Explorer 10,Firefox,Opera和Chrome支持pattern属性。 (W3Schools的)

Disclaimer: the expression is weak, go build a better one :)

免责声明:表达力弱,去建立一个更好的:)