仅使用带有额外插件的jquery的文本框中的数字

时间:2011-12-26 11:41:28

标签: javascript jquery jquery-ui

我想在jquery / javascript中只允许使用带有额外插件的文本框中的数字

我编码如下:

if ( event.keyCode == 46 || event.keyCode == 8 || (event.keyCode >=48 && event.keyCode <=57)) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress           
            event.preventDefault();                   
        }

但它允许特殊字符! (Shift + 1),@(shift +2)等

任何机构都可以告诉我完整的解决方案..提前感谢

7 个答案:

答案 0 :(得分:4)

这是牢不可破的。

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});

答案 1 :(得分:3)

<input type="text" onKeyUp="$(this).val($(this).val().replace(/[^\d]/ig, ''))" />

此文本框仅允许数字。即使输入其他字符也会消失。

答案 2 :(得分:2)

您可以使用新的html5输入类型'number'。它只会将数字作为输入。但这取决于支持它的浏览器。

<input type="number" />

您还可以将数字范围定义为

<input type="number" min="1" max="10" />

答案 3 :(得分:2)

以下解决方案:

  • 允许在数字键盘和键盘上使用数字
  • 不允许使用ctrl,alt,shift键
  • 允许Tab键导航到下一个文本框
  • 允许在您的文本框中移动后退,删除和箭头键

这是通过逐步检查事件是否符合某些标准来实现的。

$(".onlyNumerics").keydown(function (event) {
    var num = event.keyCode;
    if ((num > 95 && num < 106) || (num > 36 && num < 41) || num == 9) {
        return;
    }
    if (event.shiftKey || event.ctrlKey || event.altKey) {
        event.preventDefault();
    } else if (num != 46 && num != 8) {
        if (isNaN(parseInt(String.fromCharCode(event.which)))) {
            event.preventDefault();
        }
    }
});

答案 4 :(得分:1)

我使用下面的代码片段解决了这个问题。感谢您的投入和帮助

$('input[etype="Number"]').keydown(function(event) {

     if(event.shiftKey && ((event.keyCode >=48 && event.keyCode <=57) 
             || (event.keyCode >=186 &&  event.keyCode <=222))){
        // Ensure that it is a number and stop the Special chars
         event.preventDefault();
     }
     else if ((event.shiftKey || event.ctrlKey) && (event.keyCode > 34 && event.keyCode < 40)){     
          // let it happen, don't do anything
     }      
     else{
        // Allow only backspace , delete, numbers               
        if (event.keyCode == 9 || event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 39 ||event.keyCode == 37 
                || (event.keyCode >=48 && event.keyCode <=57)) {
            // let it happen, don't do anything
        }
        else {
           // Ensure that it is a number and stop the key press
                event.preventDefault();                   
        }
     }
    });

答案 5 :(得分:0)

见下文示例。您可以使用Regex防止数值。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function Numeric()
            {
                var field=document.iform.mob.value;            
                if (!field.match(/^[\-\+]?[\d\,]*\.?[\d]*$/))
                {
                    alert("Enter only Numerics");
                    return false;
                }
            }
        </script>
      </head>
      <body>
          <form name="iform" method="post">
              Add Your Mobile Number: <input type="text" name="mob" />
              <br/>
              <input type="submit" value="OK" onclick="return Numeric();" />
          </form>
      </body>
    </html>

答案 6 :(得分:0)

我将另一个样本添加到列表中。

我已经在我的项目中使用了一段时间了。该函数绑定到keyup

input[type=text]事件
function handleInputKeyup(e) {

    // if you want to enforce a minimum value 
    // declare somewhere else if need be
    const DEFAULT_VALUE = 1 

    //don't do anything if the text is empty
    if ($(this).val().length > 0) {
        const currentValue = Number($(this).val())

        if (isNaN(currentValue)) {
            $(this).val(DEFAULT_VALUE);
            return;
        }

        if (currentValue <= 0) {
            $(this).val(DEFAULT_VALUE);
            return;
        }
    }

}
相关问题