Hạn chế nhập vào hộp văn bản: chỉ cho phép số và dấu thập phân

107

Làm cách nào để hạn chế đầu vào cho hộp văn bản để hộp chỉ chấp nhận các số và dấu thập phân?

javascript  html 
— TinTin
nguồn
11
Câu hỏi ban đầu của anh ấy thật tuyệt, Amar ... !!! Tại sao lại thay đổi nó ..? ;)
— SpikETidE
14
Tại sao lại bỏ phiếu? Anh chàng là người mới ở đây, hãy giúp anh ta cải thiện nhiệm vụ của mình, làm ơn.
— lexu
Ayyappan.Anbalagan, hãy thêm một số ví dụ vào bài viết :) Tất cả các chuỗi này có đúng với bạn không? 192 192.168 192.168.0.1
— lak-b,
Tôi hiểu rồi, cảm ơn .. chỉ có 22,22 formate cũng vậy, nó chỉ cho phép 5 ký tự trong txtbox ...
— TinTin
Vấn đề với là gì, isNaN(this.textbox.value)??
— Sam007

Câu trả lời:

158 

<HTML>
  <HEAD>
    <SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
          var charCode = (evt.which) ? evt.which : evt.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
       }
       //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event)" 
           type="text" name="txtChar">
  </BODY>
</HTML>
Mở rộng đoạn mã

Điều này thực sự hiệu quả!

— rebisco
nguồn
1
Tại sao && charCode> 31 lại cần thiết?
— contactmatt
2
Ký tự 31 là Mã phân tách đơn vị. Khá nhiều số và văn bản nằm trong khoảng từ 32 trở lên. Mã đọc nếu mã ký tự được nhập không phải là số thập phân VÀ cao hơn 31 (dấu phân cách đơn vị) nhưng thấp hơn 48 (số 0) hoặc cao hơn 57 (số chín), không chấp nhận nó.
— Paul Williams
9
if (charCode == 46 && evt.srcElement.value.split ('.'). length> 1) {return false; } Nó sẽ có nhiều '.'... :)
— Anish Karunakaran vào
10
bao gồm numkeys bàn phím và thời gian với:&& charCode != 190 && charCode != 110 && (charCode > 105 || charCode < 96)
— recensione
1
nó đang chấp nhận nhiều hơn một '. [Kỳ] ', tôi đoán sai.
— Akshay Chawla
26 
form.onsubmit = function(){
    return textarea.value.match(/^\d+(\.\d+)?$/);
}

Đây có phải là những gì bạn đang tìm kiếm?

Tôi hy vọng nó sẽ giúp.

CHỈNH SỬA: Tôi đã chỉnh sửa ví dụ của mình ở trên để chỉ có thể có một dấu chấm, đứng trước ít nhất một chữ số và theo sau là ít nhất một chữ số.

— tau
nguồn
1
Nghĩ rằng điều này cũng sẽ xác thực '99 .23.65.86 '.... Nhưng tôi đoán câu hỏi là về việc xác thực' 56987.32 'bằng một dấu chấm .....
— SpikETidE
tôi thấy người đăng đã chỉnh sửa câu hỏi ban đầu của anh ấy / cô ấy. Cảm ơn các cập nhật!
— tau
1
Tốt hơn là tôi nên sử dụng /^\d+([\.,]\d+)?$/ để hỗ trợ các số quốc tế (trong đó dấu phẩy được sử dụng thay vì dấu chấm)
— FDIM 13/114
26

Giải pháp được chấp nhận không hoàn chỉnh, vì bạn có thể nhập nhiều '.', Ví dụ: 24 .... 22..22. với một số sửa đổi nhỏ, nó sẽ hoạt động như dự định:

<html>

<head>
  <script type="text/javascript">
    function isNumberKey(txt, evt) {
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if (charCode == 46) {
        //Check if the text already contains the . character
        if (txt.value.indexOf('.') === -1) {
          return true;
        } else {
          return false;
        }
      } else {
        if (charCode > 31 &&
          (charCode < 48 || charCode > 57))
          return false;
      }
      return true;
    }
  </script>
</head>

<body>
  <input type="text" onkeypress="return isNumberKey(this, event);" />
</body>

</html>
Mở rộng đoạn mã

— Hassan Mokdad
nguồn
Tôi đã sử dụng câu trả lời của bạn nhưng tôi đã sửa đổi điều này onkeypress = "return isNumberKey (this, event);"
— Bilbo Baggins
vâng tôi nghĩ rằng đó là không bắt buộc phải gõ vượt qua sự kiện này, vì nó làm việc với cả hai trường hợp, nhờ
— Hassan Mokdad
đã lưu cho chúng tôi một vài nét chính ..
— tq
vấn đề duy nhất với cái này là bạn có thể sao chép dán vào văn bản. Thêm vào yếu tố đầu vào ondrop="return false;" onpaste="return false;" oncontextmenu="return false;"có vẻ là đủ
— clamchoda
Đó là một dịch vụ sai đối với mọi người dùng để ngăn họ sử dụng tính năng kéo và thả hoặc sao chép và dán.
— Hubert Grzeskowiak
19

Đây là một giải pháp khác cho phép các số thập phân và cũng giới hạn các chữ số sau thập phân đến 2 chữ số thập phân.

function isNumberKey(evt, element) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8))
    return false;
  else {
    var len = $(element).val().length;
    var index = $(element).val().indexOf('.');
    if (index > 0 && charCode == 46) {
      return false;
    }
    if (index > 0) {
      var CharAfterdot = (len + 1) - index;
      if (CharAfterdot > 3) {
        return false;
      }
    }

  }
  return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="rate" placeholder="Billing Rate" required onkeypress="return isNumberKey(event,this)">
Mở rộng đoạn mã

— Kurenai Kunai
nguồn
Gần như hoàn hảo .. điều kiện cuối cùng của bạn iflà thiếu chữ "C" viết hoa.
— DNKROZ
Giải pháp đẹp !!
— Michael Murray
Đẹp. Hoạt động hoàn hảo cho tôi.
— Noor Ahmed
Lưu ý rằng giải pháp này cho phép nhiều dấu chấm ( .), dấu gạch ngang ( -) và chữ cái ekhi văn bản được dán hoặc thả vào trường. Phần tử HTML cũng sẽ hiển thị hai mũi tên để tăng và giảm số theo mặc định trong Chrome. Nút giảm dần cho phép con số giảm xuống dưới 0.
— Hubert Grzeskowiak
12

Tất cả các giải pháp được trình bày ở đây đang sử dụng các sự kiện chính duy nhất. Điều này rất dễ xảy ra lỗi vì đầu vào cũng có thể được cung cấp bằng cách sử dụng copy'n'paste hoặc drag'n'drop. Ngoài ra, một số giải pháp hạn chế việc sử dụng các phím không phải ký tự như ctrl+c, Pos1v.v.

Tôi đề nghị thay vì kiểm tra mọi phím bấm, bạn nên kiểm tra xem kết quả có hợp lệ với mong đợi của bạn hay không.

var validNumber = new RegExp(/^\d*\.?\d*$/);
var lastValid = document.getElementById("test1").value;
function validateNumber(elem) {
  if (validNumber.test(elem.value)) {
    lastValid = elem.value;
  } else {
    elem.value = lastValid;
  }
}
<textarea id="test1" oninput="validateNumber(this);" ></textarea>
Mở rộng đoạn mã

Sự oninputkiện được kích hoạt ngay sau khi một cái gì đó được thay đổi trong vùng văn bản và trước khi được hiển thị.

Bạn có thể mở rộng RegEx sang bất kỳ định dạng số nào bạn muốn chấp nhận. Điều này dễ bảo trì và dễ mở rộng hơn nhiều so với việc kiểm tra các phím bấm đơn lẻ.

— Hubert Grzeskowiak
nguồn
Đây là giải pháp thanh lịch nhất!
— jkd
4

bạn đang tìm thứ gì đó như thế này phải không?

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

         return true;
      }
      //-->
   </SCRIPT>
   </HEAD>
   <BODY>
      <INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">
   </BODY>
  </HTML>
— lak-b
nguồn
4

Chỉ cần áp dụng phương pháp này trong Jquery và bạn có thể xác thực hộp văn bản của mình để chỉ chấp nhận số chỉ có số thập phân.

function IsFloatOnly(element) {    
var value = $(element).val(); 
var regExp ="^\\d+(\\.\\d+)?$";
return value.match(regExp); 
}

Vui lòng xem demo làm việc tại đây

— Jitender Kumar
nguồn
2

Đối với bất kỳ ai gặp phải ở đây như tôi đã làm, đây là phiên bản jQuery 1.10.2 mà tôi đã viết, phiên bản này đang hoạt động rất tốt cho tôi mặc dù tốn nhiều tài nguyên:

/***************************************************
* Only allow numbers and one decimal in text boxes
***************************************************/
$('body').on('keydown keyup keypress change blur focus paste', 'input[type="text"]', function(){
    var target = $(this);

    var prev_val = target.val();

    setTimeout(function(){
        var chars = target.val().split("");

        var decimal_exist = false;
        var remove_char = false;

        $.each(chars, function(key, value){
            switch(value){
                case '0':
                case '1':
                case '2':
                case '3':
                case '4':
                case '5':
                case '6':
                case '7':
                case '8':
                case '9':
                case '.':
                    if(value === '.'){
                        if(decimal_exist === false){
                            decimal_exist = true;
                        }
                        else{
                            remove_char = true;
                            chars[''+key+''] = '';
                        }
                    }
                    break;
                default:
                    remove_char = true;
                    chars[''+key+''] = '';
                    break;
            }
        });

        if(prev_val != target.val() && remove_char === true){
            target.val(chars.join(''))
        }
    }, 0);
});
— MonkeyZeus
nguồn
2

Một chỉnh sửa nhỏ đối với câu trả lời tuyệt vời của @ rebisco để xác thực số thập phân một cách hoàn hảo.

function isNumberKey(evt) {
    debugger;
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode == 46 && evt.srcElement.value.split('.').length>1) {
        return false;
    }
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
— Anish Karunakaran
nguồn
điều này rất tốt. Tuy nhiên, tôi muốn giới hạn nó ở 2 dấu thập phân, dù sao để làm điều đó?
— nodeffect:
2

Nếu bạn muốn nó cho các giá trị float,

Đây là chức năng tôi đang sử dụng

<HTML>

<HEAD>
  <SCRIPT language=Javascript>
    <!--
    function check(e, value) {
      //Check Charater
      var unicode = e.charCode ? e.charCode : e.keyCode;
      if (value.indexOf(".") != -1)
        if (unicode == 46) return false;
      if (unicode != 8)
        if ((unicode < 48 || unicode > 57) && unicode != 46) return false;
    }
    //-->
  </SCRIPT>
</HEAD>

<BODY>
  <INPUT id="txtChar" onkeypress="return check(event,value)" type="text" name="txtChar">
</BODY>

</HTML>
Mở rộng đoạn mã

— Rahul
nguồn
1 
inputelement.onchange= inputelement.onkeyup= function isnumber(e){
    e= window.event? e.srcElement: e.target;
    while(e.value && parseFloat(e.value)+''!= e.value){
            e.value= e.value.slice(0, -1);
    }
}
— kennebec
nguồn
1 
function integerwithdot(s, iid){
        var i;
        s = s.toString();
        for (i = 0; i < s.length; i++){
            var c;
            if (s.charAt(i) == ".") {
            } else {
                c = s.charAt(i);
            }
            if (isNaN(c)) {
                c = "";
                for(i=0;i<s.length-1;i++){
                    c += s.charAt(i);
                }
                document.getElementById(iid).value = c;
                return false;
            }
        }
        return true;
    }
— Jonas Reycian
nguồn
1

đây là tập lệnh giúp bạn:

<script type="text/javascript">
// price text-box allow numeric and allow 2 decimal points only
function extractNumber(obj, decimalPlaces, allowNegative)
{
    var temp = obj.value;

    // avoid changing things if already formatted correctly
    var reg0Str = '[0-9]*';
    if (decimalPlaces > 0) {
        reg0Str += '\[\,\.]?[0-9]{0,' + decimalPlaces + '}';
    } else if (decimalPlaces < 0) {
        reg0Str += '\[\,\.]?[0-9]*';
    }
    reg0Str = allowNegative ? '^-?' + reg0Str : '^' + reg0Str;
    reg0Str = reg0Str + '$';
    var reg0 = new RegExp(reg0Str);
    if (reg0.test(temp)) return true;

    // first replace all non numbers
    var reg1Str = '[^0-9' + (decimalPlaces != 0 ? '.' : '') + (decimalPlaces != 0 ? ',' : '') + (allowNegative ? '-' : '') + ']';
    var reg1 = new RegExp(reg1Str, 'g');
    temp = temp.replace(reg1, '');

    if (allowNegative) {
        // replace extra negative
        var hasNegative = temp.length > 0 && temp.charAt(0) == '-';
        var reg2 = /-/g;
        temp = temp.replace(reg2, '');
        if (hasNegative) temp = '-' + temp;
    }

    if (decimalPlaces != 0) {
        var reg3 = /[\,\.]/g;
        var reg3Array = reg3.exec(temp);
        if (reg3Array != null) {
            // keep only first occurrence of .
            //  and the number of places specified by decimalPlaces or the entire string if decimalPlaces < 0
            var reg3Right = temp.substring(reg3Array.index + reg3Array[0].length);
            reg3Right = reg3Right.replace(reg3, '');
            reg3Right = decimalPlaces > 0 ? reg3Right.substring(0, decimalPlaces) : reg3Right;
            temp = temp.substring(0,reg3Array.index) + '.' + reg3Right;
        }
    }

    obj.value = temp;
}
function blockNonNumbers(obj, e, allowDecimal, allowNegative)
{
    var key;
    var isCtrl = false;
    var keychar;
    var reg;
    if(window.event) {
        key = e.keyCode;
        isCtrl = window.event.ctrlKey
    }
    else if(e.which) {
        key = e.which;
        isCtrl = e.ctrlKey;
    }

    if (isNaN(key)) return true;

    keychar = String.fromCharCode(key);

    // check for backspace or delete, or if Ctrl was pressed
    if (key == 8 || isCtrl)
    {
        return true;
    }

    reg = /\d/;
    var isFirstN = allowNegative ? keychar == '-' && obj.value.indexOf('-') == -1 : false;
    var isFirstD = allowDecimal ? keychar == '.' && obj.value.indexOf('.') == -1 : false;
    var isFirstC = allowDecimal ? keychar == ',' && obj.value.indexOf(',') == -1 : false;
    return isFirstN || isFirstD || isFirstC || reg.test(keychar);
}
function blockInvalid(obj)
{
    var temp=obj.value;
    if(temp=="-")
    {
        temp="";
    }

    if (temp.indexOf(".")==temp.length-1 && temp.indexOf(".")!=-1)
    {
        temp=temp+"00";
    }
    if (temp.indexOf(".")==0)
    {
        temp="0"+temp;
    }
    if (temp.indexOf(".")==1 && temp.indexOf("-")==0)
    {
        temp=temp.replace("-","-0") ;
    }
    if (temp.indexOf(",")==temp.length-1 && temp.indexOf(",")!=-1)
    {
        temp=temp+"00";
    }
    if (temp.indexOf(",")==0)
    {
        temp="0"+temp;
    }
    if (temp.indexOf(",")==1 && temp.indexOf("-")==0)
    {
        temp=temp.replace("-","-0") ;
    }
    temp=temp.replace(",",".") ;
    obj.value=temp;
}
// end of price text-box allow numeric and allow 2 decimal points only
</script>

<input type="Text" id="id" value="" onblur="extractNumber(this,2,true);blockInvalid(this);" onkeyup="extractNumber(this,2,true);" onkeypress="return blockNonNumbers(this, event, true, true);">
— Fathi Amin
nguồn
1

Giả sử tên trường hộp văn bản của bạn là Income
Gọi phương thức xác thực này khi bạn cần xác thực trường của mình:

function validate() {
    var currency = document.getElementById("Income").value;
      var pattern = /^[1-9]\d*(?:\.\d{0,2})?$/ ;
    if (pattern.test(currency)) {
        alert("Currency is in valid format");
        return true;
    } 
        alert("Currency is not in valid format!Enter in 00.00 format");
        return false;
}
— Pallavi Agarwal
nguồn
1

Mở rộng câu trả lời của @ rebisco. mã bên dưới này sẽ chỉ cho phép các số và dấu '.' (dấu chấm) duy nhất trong hộp văn bản.

function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        } else {
            // If the number field already has . then don't allow to enter . again.
            if (evt.target.value.search(/\./) > -1 && charCode == 46) {
                return false;
            }
            return true;
        }
    }
— Santosh Kurdekar
nguồn
1

Giải pháp tốt hơn

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

    if(event.target.value.indexOf('.') >=0 && charCode == 46)
        return false;

    return true;
}
— Allan Pereira
nguồn
0

Bắt đầu từ câu trả lời @rebisco:

function count_appearance(mainStr, searchFor) {
    return (mainStr.split(searchFor).length - 1);
}
function isNumberKey(evt)
{
    $return = true;
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31
            && (charCode < 48 || charCode > 57))
        $return = false;
    $val = $(evt.originalTarget).val();
    if (charCode == 46) {
        if (count_appearance($val, '.') > 0) {
            $return = false;
        }
        if ($val.length == 0) {
            $return = false;
        }
    }
    return $return;
}

Chỉ cho phép định dạng này: 123123123 [.121213]

Demo đây demo

— Babesh Florin
nguồn
0

Hy vọng nó sẽ làm việc cho bạn.

<input type="text" onkeypress="return chkNumeric(event)" />

<script>
    function chkNumeric(evt) {
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            if (charCode == 46) { return true; }
            else { return false; }
        }
        return true;
    }
</script>
— Ankur Kumar
nguồn
0

Mã sau phù hợp với tôi

Hộp nhập với sự kiện "onkeypress" như sau

<input type="text" onkeypress="return isNumberKey(this,event);" />

Hàm "isNumberKey" như sau

function isNumberKey(txt, evt) {
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode == 46) {
    //Check if the text already contains the . character
    if (txt.value.indexOf('.') === -1) {
        return true;
    } else {
        return false;
    }
  } else {
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
  }
  return true;
}
Mở rộng đoạn mã

— Bharat Jain
nguồn
0

Tôi quan sát thấy rằng đối với tất cả các câu trả lời được cung cấp ở đây, mọi thứ sẽ không hoạt động nếu chúng ta chọn một số phần của văn bản trong hộp văn bản và cố gắng ghi đè phần đó. Vì vậy, tôi đã sửa đổi chức năng như sau:

    <HTML>
  <HEAD>
    <SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
         var charCode = (evt.which) ? evt.which : event.keyCode;

if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
{
        return false;
}
 if (charCode == 46 && evt.srcElement.value.split('.').length>1 )
    {

        return false;

    } 

 if(evt.srcElement.selectionStart<evt.srcElement.selectionEnd)
    {
          return true;
    }

  if(evt.srcElement.value.split('.').length>1 && evt.srcElement.value.split('.')[1].length==2)
  {

     return false;
  }


    return true;
       }


       //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event)" 
           type="text" name="txtChar">
  </BODY>
</HTML>
— Abhishek Gahlout
nguồn
0

Đối với số thập phân và cũng cho phép số Phủ định có 2 vị trí cho số thập phân sau dấu chấm ... Tôi đã sửa đổi hàm thành:

<input type="text" id="txtSample" onkeypress="return isNumberKey(event,this)"/>



function isNumberKey(evt, element){

        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8 || charCode == 45))
            return false;
        else {
            var len = $(element).val().length;

            // Validation Point
            var index = $(element).val().indexOf('.');
            if ((index > 0 && charCode == 46) || len == 0 && charCode == 46) {
                return false;
            }
            if (index > 0) {
                var CharAfterdot = (len + 1) - index;
                if (CharAfterdot > 3) {
                    return false;
                }
            }

            // Validating Negative sign
            index = $(element).val().indexOf('-');
            if ((index > 0 && charCode == 45) || (len > 0 && charCode == 45)) {
                return false;
            }
        }
        return true;
    }
— Chris Rosete
nguồn
0

cách khác để hạn chế đầu vào cho hộp văn bản để hộp chỉ chấp nhận số và dấu thập phân là sử dụng javascript bên trong đầu vào html. Điều này phù hợp với tôi:

<input type="text" class="form-control" id="price" name="price" placeholder="Price" 
vrequired onkeyup="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')">

--Khái niệm--

9

9,99

--Đừng chấp nhận--

9,99,99

ABC

— mpalencia
nguồn
0 
function isNumberKey(evt)
{
    var charCode = (evt.which) ? evt.which : evt.keyCode;

    if(charCode==8 || charCode==13|| charCode==99|| charCode==118 || charCode==46)
    {    
        return true;  
    }

    if (charCode > 31 && (charCode < 48 || charCode > 57))
    {   
        return false; 
    }
    return true;
}

Nó sẽ chỉ cho phép số và sẽ cho phép bạn đặt "." cho số thập phân.

— Kal-El
nguồn
0 
<script type="text/javascript">

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

        return true;
    }

</script>
@Html.EditorFor(model => model.Orderids, new { id = "Orderids", Onkeypress=isNumberKey(event)})

Điều này hoạt động tốt.

— banny
nguồn
0

Giải pháp tốt nhất và hiệu quả với mẫu Pure-Javascript Trực tiếp: https://jsfiddle.net/manoj2010/ygkpa89o/ 

<script>
function removeCommas(nStr) {
    if (nStr == null || nStr == "")
        return ""; 
    return nStr.toString().replace(/,/g, "");
}

function NumbersOnly(myfield, e, dec,neg)
{        
    if (isNaN(removeCommas(myfield.value)) && myfield.value != "-") {
        return false;
    }
    var allowNegativeNumber = neg || false;
    var key;
    var keychar;

    if (window.event)
        key = window.event.keyCode;
    else if (e)
        key = e.which;
    else
        return true;
    keychar = String.fromCharCode(key);
    var srcEl = e.srcElement ? e.srcElement : e.target;    
    // control keys
    if ((key == null) || (key == 0) || (key == 8) ||
                (key == 9) || (key == 13) || (key == 27))
        return true;

    // numbers
    else if ((("0123456789").indexOf(keychar) > -1))
        return true;

    // decimal point jump
    else if (dec && (keychar == ".")) {
        //myfield.form.elements[dec].focus();
        return srcEl.value.indexOf(".") == -1;        
    }

    //allow negative numbers
    else if (allowNegativeNumber && (keychar == "-")) {    
        return (srcEl.value.length == 0 || srcEl.value == "0.00")
    }
    else
        return false;
}
</script>
<input name="txtDiscountSum" type="text" onKeyPress="return NumbersOnly(this, event,true)" />
Mở rộng đoạn mã

— Manoj Prajapat
nguồn
0

Tôi đang tự giải quyết vấn đề và đó là những gì tôi đã nhận được cho đến nay. Điều này ít nhiều hoạt động, nhưng không thể cộng trừ sau đó do kiểm tra giá trị mới. Cũng không cho phép dấu phẩy làm dấu phân cách hàng nghìn, chỉ cho phép số thập phân.

Nó không hoàn hảo, nhưng có thể cung cấp một số ý tưởng. 

app.directive('isNumber', function () {
            return function (scope, elem, attrs) {
                elem.bind('keypress', function (evt) {
                    var keyCode = (evt.which) ? evt.which : event.keyCode;
                    var testValue = (elem[0].value + String.fromCharCode(keyCode) + "0").replace(/ /g, ""); //check ignores spaces
                    var regex = /^\-?\d+((\.|\,)\d+)?$/;                        
                    var allowedChars = [8,9,13,27,32,37,39,44,45, 46] //control keys and separators             

                   //allows numbers, separators and controll keys and rejects others
                    if ((keyCode > 47 && keyCode < 58) || allowedChars.indexOf(keyCode) >= 0) {             
                        //test the string with regex, decline if doesn't fit
                        if (elem[0].value != "" && !regex.test(testValue)) {
                            event.preventDefault();
                            return false;
                        }
                        return true;
                    }
                    event.preventDefault();
                    return false;
                });
            };
        });

Cho phép:

11 11 .245 (trong bộ điều khiển được định dạng mờ thành 1111.245)

11,44

-123.123

-1 014

0123 (định dạng mờ thành 123)

không cho phép:

! @ # $ / *

abc

11.11.1

11,11.1

.42

— Jane Doe
nguồn
0 
<input type="text" onkeypress="return isNumberKey(event,this)">

<script>
   function isNumberKey(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;
            return true;
        }


</script>
— Karthik
nguồn
0

Tôi biết rằng câu hỏi này rất cũ nhưng chúng tôi vẫn thường nhận được những yêu cầu như vậy. Có rất nhiều ví dụ, tuy nhiên nhiều ví dụ dường như quá dài dòng hoặc phức tạp đối với một thiết lập đơn giản.

Hãy xem https://jsfiddle.net/vibs2006/rn0fvxuk/ này và cải thiện nó (nếu bạn có thể). Nó hoạt động trên trình duyệt IE, Firefox, Chrome và Edge.

Đây là mã làm việc. 

        
        function IsNumeric(e) {
        var IsValidationSuccessful = false;
        console.log(e.target.value);
        document.getElementById("info").innerHTML = "You just typed ''" + e.key + "''";
        //console.log("e.Key Value = "+e.key);
        switch (e.key)
         {         
             case "1":
             case "2":
             case "3":
             case "4":
             case "5":
             case "6":
             case "7":
             case "8":
             case "9":
             case "0":
             case "Backspace":             
                 IsValidationSuccessful = true;
                 break;
                 
						 case "Decimal":  //Numpad Decimal in Edge Browser
             case ".":        //Numpad Decimal in Chrome and Firefox                      
             case "Del": 			// Internet Explorer 11 and less Numpad Decimal 
                 if (e.target.value.indexOf(".") >= 1) //Checking if already Decimal exists
                 {
                     IsValidationSuccessful = false;
                 }
                 else
                 {
                     IsValidationSuccessful = true;
                 }
                 break;

             default:
                 IsValidationSuccessful = false;
         }
         //debugger;
         if(IsValidationSuccessful == false){
         
         document.getElementById("error").style = "display:Block";
         }else{
         document.getElementById("error").style = "display:none";
         }
         
         return IsValidationSuccessful;
        }
Numeric Value: <input type="number" id="text1" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" /><br />
    <span id="error" style="color: Red; display: none">* Input digits (0 - 9) and Decimals Only</span><br />
    <div id="info"></div>
Mở rộng đoạn mã

— vibs2006
nguồn
0

Tôi đã chọn giải quyết vấn đề này trong oninputsự kiện để xử lý sự cố dán bàn phím, dán chuột và các thao tác gõ phím. Chuyển true hoặc false để cho biết xác thực số thập phân hoặc số nguyên.

Về cơ bản, nó là ba bước trong ba lớp lót. Nếu bạn không muốn cắt bớt số thập phân, hãy nhận xét bước thứ ba. Điều chỉnh để làm tròn cũng có thể được thực hiện trong bước thứ ba.

// Example Decimal usage;
// <input type="text"  oninput="ValidateNumber(this, true);" />
// Example Integer usage:
// <input type="text"  oninput="ValidateNumber(this, false);" />
function ValidateNumber(elm, isDecimal) {
    try {

        // For integers, replace everything except for numbers with blanks.
        if (!isDecimal) 
            elm.value = elm.value.replace(/[^0-9]/g, ''); 
        else {
            // 1. For decimals, replace everything except for numbers and periods with blanks.
            // 2. Then we'll remove all leading ocurrences (duplicate) periods
            // 3. Then we'll chop off anything after two decimal places.

            // 1. replace everything except for numbers and periods with blanks.
            elm.value = elm.value.replace(/[^0-9.]/g, '');

            //2. remove all leading ocurrences (duplicate) periods
            elm.value = elm.value.replace(/\.(?=.*\.)/g, '');

            // 3. chop off anything after two decimal places.
            // In comparison to lengh, our index is behind one count, then we add two for our decimal places.
            var decimalIndex = elm.value.indexOf('.');
            if (decimalIndex != -1) { elm.value = elm.value.substr(0, decimalIndex + 3); }
        }
    }
    catch (err) {
        alert("ValidateNumber " + err);
    }
}
— ngaochoda
nguồn
0 
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>

Bạn có thể hạn chế người dùng nhập các giá trị bằng cách chỉ định phạm vi giá trị ASCII.
Ví dụ : 48 đến 57 cho các giá trị số (0 đến 9)

— SHASHANK PUJARI
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.