【问题标题】:How to allow numeric (0-9) & decimal value textbox using jQuery?如何使用 jQuery 允许数字(0-9)和十进制值文本框?
【发布时间】:2019-09-27 17:55:24
【问题描述】:

我写了几行只接受数字字符,但我的脚本不工作。当我输入任何字母时,它会被插入到我不想要的文本框中。我希望该文本框应该只接受数值和“。”小数点。这是我的脚本。告诉我那里出了什么问题。

 $().ready(function () {
        $("input[id*='txtQty']").keyup(function (event) {
            var flag = false;

            if (event.shiftKey == true) {
                event.preventDefault();
            }
            // Allow Only: keyboard 0-9, numpad 0-9, backspace, tab, left arrow, right arrow, delete
            if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46) {
                // Allow normal operation
                flag = true;
            } else {
                // Prevent the rest
                event.preventDefault();
            }

            if (flag) {

            }
        });
    });

如果可能的话,请给我脚本,它可以让我的文本框只有数字和十进制数字。谢谢

这是我的完整脚本。问题是它占用了我不想要的点 "."

        $().ready(function () {
        $("input[id*='txtQty']").keydown(function (event) {
            var flag = true;

            if (event.shiftKey == true) {
                event.preventDefault();
                flag = false;
            }

            if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190) {

            } else {
                event.preventDefault();
                flag = false;
            }

            if (flag) {
                if (jQuery.trim(this.value) != "") {
                    if (IsNumeric(jQuery.trim(this.value)) == true) {
                        var Symbol = $("span[id*='lblPrice']").text().trim().substring(1, 0);
                        var oldprice = $("input[id*='txtHiddenPrice']").val();
                        var newprice = Math.round((oldprice * this.value), 2);
                        $("span[id*='lblPrice']").text(Symbol + newprice);
                        UpdateCart($(this).closest('tr').find("input[id*='txtItemId']").val(), $(this).closest('tr').find("input[id*='txtProductId']").val(), this.value);
                    }
                }
            }
        });
    });

所以告诉我我需要在我的代码中更改什么,因此它不应该采用十进制值。 另一个重要的事情是我将 keydown() 事件附加到通配符系统,因为我的页面可能有许多文本框,名称以 txtQty 结尾。

 $("input[id*='txtQty']").keyup(function (event) {

所以请帮助我。谢谢

【问题讨论】:

标签: jquery


【解决方案1】:

您不能在keyup 事件中使用e.preventDefault()。将其更改为keydown

$(function () {
    $("input[id*='txtQty']").keydown(function (event) {


        if (event.shiftKey == true) {
            event.preventDefault();
        }

        if ((event.keyCode >= 48 && event.keyCode <= 57) || 
            (event.keyCode >= 96 && event.keyCode <= 105) || 
            event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 ||
            event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190) {

        } else {
            event.preventDefault();
        }

        if($(this).val().indexOf('.') !== -1 && event.keyCode == 190)
            event.preventDefault(); 
        //if a decimal has been added, disable the "."-button

    });
});​

Fiddle

【讨论】:

  • 仍有问题....请查看我的代码的编辑部分。我使用你的代码,但它仍然采用我不想要的十进制。请告诉我我需要纠正什么。谢谢
  • @Thomas 我以为你想允许 1 个“点”?还是根本不应该允许?
  • @Thomas 然后删除检查是否超过一个点:$(this).val().indexOf('.') !== -1 &amp;&amp;
  • 我知道这是一篇旧帖子,但它显然仍然很有帮助,因为它帮助了我!无论如何,您还没有包含键盘的小数点,keyCode 110。
  • 通过其他字符的上下文菜单复制和粘贴将起作用:-(
【解决方案2】:

您可以在键入时删除非数字字符。

$("#txtQty").keyup(function() {
    var $this = $(this);
    $this.val($this.val().replace(/[^\d.]/g, ''));        
});​

The demo.

【讨论】:

  • 仍有问题....请查看我的代码的编辑部分。我使用你的代码,但它仍然需要我不想要的十进制。请告诉我我需要纠正什么。谢谢
  • 允许 "10.547.547" 。它不应该是多个“。”为十进制。不是吗?
【解决方案3】:

创建一个 numbers-only 类并将其添加到您的元素中

这将接受:
- 退格
- 删除
- 数字
- 一位小数

$(".numbers-only").keypress(function (e) {
    if(e.which == 46){
        if($(this).val().indexOf('.') != -1) {
            return false;
        }
    }

    if (e.which != 8 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) {
        return false;
    }
});

【讨论】:

    【解决方案4】:

    防止非数字数字

            $(".number").on('keypress', function (e) {
                return e.metaKey || e.which <= 0 || e.which == 8 || e.which == 46 || /[0-9]/.test(String.fromCharCode(e.which));
                //      cmd/ctrl ||  arrow keys  ||   delete key ||   dot key     || numbers
            });
    

    【讨论】:

      【解决方案5】:

      此解决方案仅适用于您不包含十进制数或仅包含 0-9 的数字

      $("#number").keypress(function( event ){
          var key = event.which;
      
          if( ! ( key >= 48 && key <= 57 ) )
              event.preventDefault();
      });
      

      你可以在这里查看运行示例http://jsfiddle.net/yghD3/6/

      【讨论】:

      • 不允许小数
      【解决方案6】:
      $('.number').keypress(function(event) {
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
          event.preventDefault();
        }
      });
      

      【讨论】:

        【解决方案7】:

        我的解决方案接受复制和粘贴并保存插入符号的位置。它用于产品成本,因此仅允许正十进制值。可以很容易地重构以允许负数或整数。

        $(function () {
            $("input.only-positive-decimal").bind("change keyup input", function () {
                    var position = this.selectionStart - 1;
                        //remove all but number and .
                        var fixed = this.value.replace(/[^0-9\.]/g, '');
                        if (fixed.charAt(0) === '.')                  //can't start with .
                            fixed = fixed.slice(1);
        
                        var pos = fixed.indexOf(".") + 1;
                        if (pos >= 0)               //avoid more than one .
                            fixed = fixed.substr(0, pos) + fixed.slice(pos).replace('.', '');
        
                        if (this.value !== fixed) {
                            this.value = fixed;
                            this.selectionStart = position;
                            this.selectionEnd = position;
                        }
            });
        });
        

        放在html页面上:

        <input type="text" class="only-positive-decimal" />
        

        【讨论】:

          【解决方案8】:

          你可以试试http://www.texotela.co.uk/code/jquery/numeric/

          This thread 提到了同一个插件以及您可以尝试的许多其他事情。

          【讨论】:

            【解决方案9】:
            //This will let you enter numbers only and the decimal point ones.
            
            $(window).load(function(){
            $('.number').keypress(function(event) {
              if(event.which < 46 || event.which >= 58 || event.which == 47) {
                event.preventDefault();
              }
            
              if(event.which == 46 && $(this).val().indexOf('.') != -1) {
                this.value = '' ;
              }  
            });
            });
            

            【讨论】:

            • HTML 代码:
            【解决方案10】:

            它将只允许 1 到 9 个数字十进制。如果正在插入其他字符,它将替换这些数字。

            <script>
              $("input[id*='txtQty']").keydown(function () {
                var txtQty = $(this).val().replace(/[^0-9\.]/g,'');
                $(this).val(txtQty);
              });
            </script>
            

            签入fiddle

            【讨论】:

            • 345646.456.45645 失败
            【解决方案11】:

            试试这个代码

            $('#from-amount1').keypress(function(event) {
            //alert(event.which == 8);
            //alert(event.which);
                if((event.which > 47 && event.which < 58) || (event.which == 46 || event.which == 8))
                {
                	 // your condition
                }
                else
                {
                event.preventDefault();
                }
            }).on('paste', function(event) {
                event.preventDefault();
            });
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <input type="text" value="" id="from-amount1"/>

            【讨论】:

              【解决方案12】:
              element.keypress(function (e) { 
                  var charCode = (e.which) ? e.which : event.keyCode;
                  var dec=0;
              
                  dec = (this.value.match(/[.]/g) || [] ).length;
              
                  if(dec===1 && e.key=='.')
                      return false;
              
                  if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode!=46)
                      return false;
              
              });
              

              【讨论】:

                【解决方案13】:

                1 允许第一个字符点 2 拒绝多个点 3 允许两个点键

                在您的 HTML 中

                <input class="number" type="number" log="" id="yourId" log="" />
                
                $('#yourId').keypress(KeyPressOnlyDecimals);
                
                
                function KeyPressOnlyDecimals (event) {
                
                   if (event.which != 13)
                        {
                                let cId = $(window.getSelection().anchorNode).find('input')[0].id;
                                let tId = $(event.currentTarget).attr('id');
                                let sel = window.getSelection().toString();
                
                                if (((event.which != 46  ) || ($(this).val().indexOf('.') != -1  && ($(event.currentTarget).val().length > 0 &&  ((cId != tId) || (cId === tId && (sel == null || sel.length == 0)))))) && (event.which < 48 || event.which > 57)) {
                                    event.preventDefault();
                                }
                                $(event.currentTarget).on('paste', function(event) {
                                    event.preventDefault();
                                });
                                var currentVal = $(event.currentTarget).val();
                
                                let log =   $(event.currentTarget).attr('log');
                                var count = log.split('.').length;
                                if (count == 2 && event.which == 46 && sel != currentVal)
                                {
                                    event.preventDefault();
                                }
                
                                if (count >= 2)
                                {
                
                                    if (cId === tId && sel.length > 0)
                                    {
                                        var replaced = currentVal.replace(new RegExp(sel, 'g'), event.key);
                
                                    }
                
                                    if (count > 2 && $(event.currentTarget).val().length > 0 &&  ((cId != tId) || (cId === tId && (sel == null  || sel.length == 0) ))) 
                                    {
                                        event.preventDefault();
                                    }
                
                                }
                                else
                                {
                                    if(event.which == 46)
                                        $(event.currentTarget).attr('log',event.key);
                                }
                
                                console.log($(event.currentTarget).attr('log'));
                
                        }
                  }
                

                【讨论】:

                  猜你喜欢
                  • 1970-01-01
                  • 2016-06-01
                  • 2013-12-19
                  • 2016-06-30
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  相关资源
                  最近更新 更多