Membatasi input ke kotak teks: hanya mengizinkan angka dan titik desimal

107

Bagaimana cara membatasi input ke kotak teks sehingga hanya menerima angka dan titik desimal?

javascript html TinTin
sumber

11

Pertanyaan aslinya sangat bagus, Amar ... !!! Mengapa mengubahnya ..? ;)

SpikETidE

14

Mengapa suara rendah? Pria itu baru di sini, bantu dia untuk meningkatkan pencariannya, tlg.

lexu

Ayyappan.Anbalagan, tambahkan beberapa contoh pada postingan :) Apakah semua string ini benar untuk Anda? 192 192.168 192.168.0.1

lak-b

i got it man thanks .. hanya format 22.22 juga harus mengizinkan hanya 5 karakter di txtbox ...

TinTin

Apa masalahnya isNaN(this.textbox.value)??

Sam007

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>

Luaskan cuplikan

Ini benar-benar berhasil!

rebisco
sumber

1

Mengapa && charCode> 31 dibutuhkan?

contactmatt

2

Karakter 31 adalah Kode Pemisah Unit. Cukup banyak angka dan teks antara 32 dan lebih tinggi. Kode berbunyi bahwa jika kode karakter yang dimasukkan bukan desimal DAN lebih tinggi dari 31 (Pemisah unit) tetapi lebih rendah dari 48 (angka nol) atau lebih tinggi dari 57 (angka sembilan), jangan terima.

Paul Williams

9

if (charCode == 46 && evt.srcElement.value.split ('.'). length> 1) {return false; } Ini akan menghargai banyak '.'... :)

Anish Karunakaran

10

termasuk tombol angka dan titik dengan:&& charCode != 190 && charCode != 110 && (charCode > 105 || charCode < 96)

mga

1

itu menerima lebih dari satu '. [titik] ', yang sepertinya salah.

Akshay Chawla

26

form.onsubmit = function(){
    return textarea.value.match(/^\d+(\.\d+)?$/);
}

Apakah ini yang kamu cari?

Saya harap ini membantu.

EDIT: Saya mengedit contoh saya di atas sehingga hanya boleh ada satu titik, diawali dengan setidaknya satu digit dan diikuti oleh setidaknya satu digit.

tau
sumber

1

Pikirkan ini juga akan memvalidasi '99 .23.65.86 '.... Tapi saya kira pertanyaannya adalah tentang memvalidasi' 56987.32 'dengan titik tunggal .....

SpikETidE

Saya melihat poster tersebut telah mengedit pertanyaan aslinya. terima kasih atas pembaruannya!

tau

1

Sebaiknya saya menggunakan /^\d+([\.,]\d+)?$/ untuk mendukung nomor internasional (di mana koma digunakan sebagai pengganti titik)

FDIM

26

Solusi yang diterima tidak lengkap, karena Anda dapat memasukkan beberapa '.', Misalnya 24 .... 22..22. dengan beberapa modifikasi kecil, ini akan berfungsi sebagaimana mestinya:

<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>

Luaskan cuplikan

Hassan Mokdad
sumber

Saya menggunakan jawaban Anda tetapi saya mengubah onkeypress = "return isNumberKey (this, event);"

Bilbo Baggins

ya, saya pikir itu adalah opsional untuk mengetik lulus acara, karena berfungsi dengan kedua kasus, terima kasih

Hassan Mokdad

menyelamatkan kami dari beberapa

penekanan

satu-satunya masalah dengan yang satu ini adalah Anda dapat menyalin tempel dalam teks. Menambahkan ke elemen masukan ondrop="return false;" onpaste="return false;" oncontextmenu="return false;"tampaknya cukup

clamchoda

Ini adalah layanan yang salah untuk setiap pengguna untuk mencegah mereka menggunakan drag-and-drop atau copy-and-paste.

Hubert Grzeskowiak

19

Berikut adalah satu solusi lagi yang memungkinkan untuk bilangan desimal dan juga membatasi angka setelah desimal menjadi 2 tempat desimal.

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)">

Luaskan cuplikan

Kurenai Kunai
sumber

Hampir sempurna .. kondisi terakhir Anda iftidak memiliki huruf besar "C".

DNKROZ

Solusi yang indah !!

Michael Murray

Cantik. Bekerja dengan sempurna untuk saya.

Noor Ahmed

Perhatikan bahwa solusi ini memungkinkan beberapa titik ( .), tanda hubung ( -) dan huruf esaat teks ditempelkan atau dijatuhkan ke bidang. Elemen HTML juga akan menampilkan dua panah untuk menaikkan dan menurunkan angka secara default di Chrome. Tombol penurunan memungkinkan angka turun di bawah nol.

Hubert Grzeskowiak

12

Semua solusi yang disajikan di sini menggunakan peristiwa kunci tunggal. Ini sangat rawan kesalahan karena input juga dapat diberikan menggunakan copy'n'paste atau drag'n'drop. Juga beberapa solusi membatasi penggunaan kunci non-karakter seperti ctrl+c, Pos1dll.

Saya sarankan daripada memeriksa setiap penekanan tombol Anda memeriksa apakah hasilnya valid sesuai dengan harapan Anda.

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>

Luaskan cuplikan

The oninputevent dipicu setelah sesuatu yang berubah dalam area teks dan sebelum diberikan.

Anda dapat memperluas RegEx ke format angka apa pun yang ingin Anda terima. Ini jauh lebih mudah dirawat dan diperpanjang daripada memeriksa penekanan tombol tunggal.

Hubert Grzeskowiak
sumber

Ini adalah solusi paling elegan!

jkd

4

Apakah Anda mencari sesuatu seperti ini?

   <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
sumber

4

Hanya perlu menerapkan metode ini di Jquery dan Anda dapat memvalidasi kotak teks Anda untuk hanya menerima angka dengan desimal saja.

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

Silakan lihat demo kerja di sini

Jitender Kumar
sumber

2

Bagi siapa pun yang tersandung di sini seperti yang saya lakukan, berikut adalah versi jQuery 1.10.2 yang saya tulis yang berfungsi sangat baik untuk saya meskipun membutuhkan sumber daya yang intensif:

/***************************************************
* 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
sumber

2

Koreksi kecil untuk jawaban brilian @Rebisco untuk memvalidasi desimal dengan sempurna.

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
sumber

ini sangat bagus. Namun, saya ingin membatasinya menjadi 2 koma desimal, toh untuk melakukannya?

nodeffect

2

Jika Anda menginginkannya untuk nilai float,

Inilah fungsi yang saya gunakan

<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>

Luaskan cuplikan

Rahul
sumber

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
sumber

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
sumber

1

berikut adalah skrip yang membantu Anda:

<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
sumber

1

Misalkan nama bidang kotak teks Anda adalah Income
Panggil metode validasi ini ketika Anda perlu memvalidasi bidang Anda:

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
sumber

1

Memperluas jawaban @ rebisco. kode di bawah ini hanya akan mengizinkan angka dan satu '.' (titik) di kotak teks.

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
sumber

1

Solusi yang lebih baik

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
sumber

0

Mulai dari jawaban @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;
}

Hanya mengizinkan format ini: 123123123 [.121213]

Demo di sini demo

Babesh Florin
sumber

0

Semoga berhasil untuk Anda.

<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
sumber

0

Kode berikut berhasil untuk saya

Kotak masukan dengan acara "onkeypress" sebagai berikut

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

Fungsi "isNumberKey" adalah sebagai berikut

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

Luaskan cuplikan

Bharat Jain
sumber

0

Saya mengamati bahwa untuk semua jawaban yang diberikan di sini, semuanya tidak berfungsi jika kita memilih beberapa bagian teks di kotak teks dan mencoba menimpa bagian itu. Jadi saya memodifikasi fungsinya yaitu seperti di bawah ini:

    <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
sumber

0

Untuk angka Desimal dan juga memperbolehkan angka Negatif dengan 2 tempat untuk desimal setelah titik ... Saya memodifikasi fungsinya menjadi:

<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
sumber

0

cara alternatif untuk membatasi input ke kotak teks sehingga hanya menerima angka dan titik desimal adalah dengan menggunakan javascript di dalam input html. Ini bekerja untuk saya:

<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')">

--Menerima--

9

9,99

--Jangan terima--

9.99.99

ABC

mpalencia
sumber

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

Ini akan memungkinkan hanya numerik dan akan membiarkan Anda meletakkan "." untuk desimal.

Kal-El
sumber

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

Ini bekerja dengan baik.

banny
sumber

0

Solusi terbaik dan berfungsi dengan demo Langsung sampel Pure-Javascript: 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)" />

Luaskan cuplikan

Manoj Prajapat
sumber

0

Mengerjakan masalah sendiri, dan itulah yang saya dapatkan sejauh ini. Ini kurang lebih berfungsi, tetapi tidak mungkin menambahkan minus setelahnya karena pemeriksaan nilai baru. Juga tidak mengizinkan koma sebagai pemisah seribu, hanya desimal.

Itu tidak sempurna, tetapi mungkin memberi beberapa ide.

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

Memungkinkan:

11 11 .245 (dalam pengontrol diformat dengan blur ke 1111.245)

11,44

-123.123

-1 014

0123 (diformat pada blur ke 123)

tidak mengizinkan:

! @ # $ / *

abc

11.11.1

11,11.1

0,42

Jane Doe
sumber

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
sumber

0

Saya tahu bahwa pertanyaan ini sudah sangat tua tetapi kami masih sering mendapatkan persyaratan seperti itu. Ada banyak contoh, namun banyak yang tampaknya terlalu bertele - tele atau rumit untuk sebuah implimentasi sederhana.

Lihat https://jsfiddle.net/vibs2006/rn0fvxuk/ dan perbaiki (jika Anda bisa). Ia bekerja di IE, Firefox, Chrome dan Edge Browser.

Ini kode yang berfungsi.

        
        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>

Luaskan cuplikan

vibs2006
sumber

0

Saya memilih untuk menangani ini pada oninputacara tersebut untuk menangani masalah penempelan keyboard, penempelan mouse, dan penekanan tombol. Berikan true atau false untuk menunjukkan validasi desimal atau integer.

Ini pada dasarnya tiga langkah dalam tiga satu liner. Jika Anda tidak ingin memotong desimal, beri komentar pada langkah ketiga. Penyesuaian untuk pembulatan juga dapat dilakukan pada langkah ketiga.

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

clamchoda.dll
sumber

0

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>

Anda dapat membatasi nilai yang akan dimasukkan oleh pengguna dengan menentukan rentang nilai ASCII.
Contoh : 48 hingga 57 untuk nilai numerik (0 hingga 9)

SHASHANK PUJARI
sumber

Membatasi input ke kotak teks: hanya mengizinkan angka dan titik desimal

Jawaban: