表单域中只允许数字或小数点答案

【问题标题】：Allow only numbers or decimal point in form field表单域中只允许数字或小数点
【发布时间】：2013-07-11 01:38:34
【问题描述】：

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

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

         return true;
      }

提前谢谢你！

答案：

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

 return true;
 }

添加 charCode 46 效果很好（按键值）。 190 和 110 什么也没做。

感谢大家的帮助！

【问题讨论】：

标签： javascript forms

【解决方案1】：

代码取决于您正在收听的事件，通过使用带有测试输入的 JavaScript 事件 KeyCode 测试页here 来查找您想要的内容的简单方法，例如一个句号（. 左移右移）你有

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

对于数字键盘上的.，它是

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

如您所见，使用 onKeyPress 和 charCode 检查是最统一的，这是它的 unicode 编号； String.fromCharCode(46); // ".".

有一个full list on the MDN page for KeyboardEvent 也有说明

注意：Web 开发人员不应在 keydown 和 keyup 事件处理程序中使用可打印键的 keycode 属性。如上所述，keycode 不能用于检查将要输入的字符，尤其是当按下 Shift 键或 AltGr 键时。当 Web 开发人员实现快捷键处理程序时，至少在 Gecko 上，按键事件是更好的事件。详情请见Gecko Keypress Event。

您可以在我链接到的测试页面中观察到在 keyCode 上使用 AltGr 或 Shift 的奇怪效果好吧。

【讨论】：

感谢您的所有帮助。我能够让它工作： function isNumberKey(evt) { var charCode = (evt.which) ？ evt.which : event.keyCode if (charCode > 31 && (charCode 57) && charCode != 46) 返回 false；返回真； charCode 46 工作，另一个没有。谢谢！

【解决方案2】：

在 HTML5 中，input 元素有了一个新属性：pattern。您可以在提交表单之前指定一个由浏览器验证的正则表达式。

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

不过，它尚未得到广泛支持。

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 pattern 属性。 (w3schools)

免责声明：表达很弱，去构建一个更好的:)

【讨论】：

【解决方案3】：

假设您使用的是向下键或向上键：

  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 为小数点，190 为句点

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

Heres a fiddle with some test cases

【讨论】：

【解决方案4】：

<asp:TextBox ID="txt" onkeypress="return isDecimalKey(event,this)" runat="server">     


function isDecimalKey(evt,obj)
    {
       var charCode = (evt.which) ? evt.which : event.keyCode
       var value = obj.value;
       var dotcontains = value.indexOf(".") != -1;
       if (dotcontains)
           if (charCode == 46) return false;
       if (charCode == 46) return true;
       if (charCode > 31 && (charCode < 48 || charCode > 57))
           return false;
    }

在 MVC 中

 @Html.TextBoxFor(m => m.fieldName, new { htmlAttributes = new { @class = "form- 
 control forDecimal" }})

 $(document).on("keypress", ".forDecimal", function (evt) {
       var charCode = (evt.which) ? evt.which : event.keyCode
       var value = $(this).val();

        var dotcontains = value.indexOf(".") != -1;
        if (dotcontains)
            if (charCode == 46) return false;
        if (charCode == 46) return true;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
           return false;
});

【讨论】：