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();
        }



  • 相关阅读:
    原型与继承
    sqlserver优化管理
    vue 错误拦截
    axios 重新发起上次请求
    vue 滚动加载数据
    el-scrollbar组件
    ES服务器优化
    Aspose 生成pdf行距的不正确的问题,行距变高
    DocumentFormat.OpenXml.dll通過word做好的模板生成word
    stm32f103 rt-thread fal easyflash移植过程
  • 原文地址:https://www.cnblogs.com/woodyliang/p/6396833.html
Copyright © 2011-2022 走看看