zoukankan      html  css  js  c++  java
  • Restricting Input in HTML Textboxes to Numeric Values

    Ok, here’s a fairly basic one – how to force a textbox to accept only numeric input. Somebody asked me this today on a support call so I did a few quick lookups online and found the solutions listed rather unsatisfying. The main problem with most of the examples I could dig up was that they only include numeric values, but that provides a rather lame user experience. You need to still allow basic operational keys for a textbox – navigation keys, backspace and delete, tab/shift tab and the Enter key - to work or else the textbox will feel very different than a standard text box.

    Yes there are plug-ins that allow masked input easily enough but most are fixed width which is difficult to do with plain number input. So I took a few minutes to write a small reusable plug-in that handles this scenario. Imagine you have a couple of textboxes on a form like this:

        <div class="containercontent">
        
             <div class="label">Enter a number:</div>
            <input type="text" name="txtNumber1" id="txtNumber1" value="" class="numberinput" />
    
             <div class="label">Enter a number:</div>
            <input type="text" name="txtNumber2" id="txtNumber2" value="" class="numberinput" />
        </div>
    

    and you want to restrict input to numbers. Here’s a small .forceNumeric() jQuery plug-in that does what I like to see in this case:

    [Updated thanks to Elijah Manor for a couple of small tweaks for additional keys to check for]

         <script type="text/javascript">
             $(document).ready(function () {
                 $(".numberinput").forceNumeric();
             });
    
    
             // forceNumeric() plug-in implementation
             jQuery.fn.forceNumeric = function () {
    
                 return this.each(function () {
                     $(this).keydown(function (e) {
                         var key = e.which || e.keyCode;
    
                         if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
                         // numbers   
                             key >= 48 && key <= 57 ||
                         // Numeric keypad
                             key >= 96 && key <= 105 ||
                         // comma, period and minus, . on keypad
                            key == 190 || key == 188 || key == 109 || key == 110 ||
                         // Backspace and Tab and Enter
                            key == 8 || key == 9 || key == 13 ||
                         // Home and End
                            key == 35 || key == 36 ||
                         // left and right arrows
                            key == 37 || key == 39 ||
                         // Del and Ins
                            key == 46 || key == 45)
                             return true;
    
                         return false;
                     });
                 });
             }
         </script>
    
    
    

    With the plug-in in place in your page or an external .js file you can now simply use a selector to apply it:

    $(".numberinput").forceNumeric();

    The plug-in basically goes through each selected element and hooks up a keydown() event handler. When a key is pressed the handler is fired and the keyCode of the event object is sent. Recall that jQuery normalizes the JavaScript Event object between browsers. The code basically white-lists a few key codes and rejects all others. It returns true to indicate the keypress is to go through or false to eat the keystroke and not process it which effectively removes it.

    Simple and low tech, and it works without too much change of typical text box behavior.

     AND OTHER WAYS

    1.   
    $(".numericOnly").keypress(function (e) { if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false; });

    2.  
    jQuery('.plan_eff').keyup(function () {     
      this.value = this.value.replace(/[^1-9.]/g,'');
    });
    <input name="number" onkeyup="if (/D/g.test(this.value)) this.value = this.value.replace(/D/g,'')">

    3.  
    // Allow: backspace, delete, tab, escape, enter, ctrl+A and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
             // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) || 
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
    
        var charValue = String.fromCharCode(e.keyCode)
            , valid = /^[0-9]+$/.test(charValue);
    
        if (!valid) {
            e.preventDefault();
        }



  • 相关阅读:
    【DSP开发】回马枪要你命 德州仪器发布最强ARM芯片Keystone II
    【DSP开发】回马枪要你命 德州仪器发布最强ARM芯片Keystone II
    【DSP开发】【VS开发】YUV与RGB格式转换
    【DSP开发】【VS开发】YUV与RGB格式转换
    【DSP开发】【图像处理】Gray与YUV之间的转换关系
    【DSP开发】【图像处理】Gray与YUV之间的转换关系
    【DSP开发】HyperLink 编程和性能考量
    【DSP开发】HyperLink 编程和性能考量
    【DSP开发】C6000非多核非KeyStone系列DSP中断系统
    【DSP开发】C6000非多核非KeyStone系列DSP中断系统
  • 原文地址:https://www.cnblogs.com/woodyliang/p/6396833.html
Copyright © 2011-2022 走看看