Apakah ada cara cepat untuk mengatur input teks HTML ( <input type=text />) untuk hanya memungkinkan penekanan tombol numerik (plus '.')?

^{Catatan: Ini adalah jawaban yang diperbarui. Komentar di bawah mengacu pada versi lama yang dipusingkan dengan kode kunci.}

JavaScript

Cobalah sendiri di JSFiddle .

Anda dapat memfilter nilai input teks <input>dengan setInputFilterfungsi berikut (mendukung Salin + Tempel, Seret + Jatuhkan, pintasan keyboard, operasi menu konteks, tombol yang tidak dapat diketikkan, posisi caret, tata letak keyboard yang berbeda, dan semua browser sejak IE 9 ) :

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  });
}

Anda sekarang dapat menggunakan setInputFilterfungsi untuk menginstal filter input:

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

Lihat demo JSFiddle untuk lebih banyak contoh filter masukan. Perhatikan juga bahwa Anda masih harus melakukan validasi sisi server!

TypeScript

Berikut adalah versi TypeScript ini.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery

Ada juga versi jQuery ini. Lihat jawaban ini .

HTML 5

HTML 5 memiliki solusi asli dengan <input type="number">(lihat spesifikasi ), tetapi perhatikan bahwa dukungan browser bervariasi:

• Sebagian besar browser hanya akan memvalidasi input saat mengirimkan formulir, dan bukan saat mengetik.
• Sebagian besar peramban seluler tidak mendukung step, mindan maxatribut.
• Chrome (versi 71.0.3578.98) masih memungkinkan pengguna untuk memasukkan karakter edan Emasuk ke bidang. Lihat juga pertanyaan ini .
• Firefox (versi 64.0) dan Edge (EdgeHTML versi 17.17134) masih memungkinkan pengguna untuk memasukkan teks apa pun ke dalam bidang.

Cobalah sendiri di w3schools.com .

Gunakan DOM ini

<input type='text' onkeypress='validate(event)' />

Dan skrip ini

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

Saya telah mencari panjang dan keras untuk jawaban yang bagus untuk ini, dan kami sangat membutuhkan <input type="number", tetapi singkatnya, 2 ini adalah cara paling ringkas yang bisa saya buat:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

Jika Anda tidak suka karakter yang tidak diterima ditampilkan selama sepersekian detik sebelum dihapus, metode di bawah ini adalah solusi saya. Perhatikan berbagai kondisi tambahan, ini untuk menghindari penonaktifan semua jenis navigasi dan hotkey. Jika ada yang tahu bagaimana memadatkan ini, beri tahu kami!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

Berikut ini adalah yang sederhana yang memungkinkan tepat satu desimal, tetapi tidak lebih:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

Dan satu contoh lagi, yang sangat bagus untuk saya:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

Juga lampirkan ke acara penekanan tombol

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

Dan HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

Berikut adalah contoh jsFiddle

HTML5 memiliki <input type=number>, yang terdengar tepat untuk Anda. Saat ini, hanya Opera yang mendukungnya secara asli, tetapi ada proyek yang memiliki implementasi JavaScript.

Sebagian besar jawaban di sini semuanya memiliki kelemahan dalam menggunakan peristiwa-peristiwa penting .

Banyak jawaban akan membatasi kemampuan Anda untuk melakukan pemilihan teks dengan makro keyboard, salin + tempel dan perilaku yang tidak diinginkan, yang lain tampaknya bergantung pada plugin jQuery tertentu, yang membunuh lalat dengan senapan mesin.

Solusi sederhana ini tampaknya bekerja paling baik untuk saya lintas platform, terlepas dari mekanisme input (keystroke, copy + paste, klik kanan copy + paste, speech-to-text dll.). Semua makro keyboard pemilihan teks akan tetap berfungsi, dan bahkan akan membatasi kemampuannya untuk menetapkan nilai non-numerik dengan skrip.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

Saya memilih untuk menggunakan kombinasi dari dua jawaban yang disebutkan di sini yaitu

<input type="number" />

dan

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

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

HTML5 mendukung regex, sehingga Anda dapat menggunakan ini:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

Peringatan: Beberapa browser belum mendukung ini.

JavaScript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // 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) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

tambahan Anda bisa menambahkan koma, titik, dan minus (, .-)

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type="text" onkeydown="validateNumber(event);"/ >

Sangat sederhana....

// Dalam fungsi JavaScript (dapat menggunakan HTML atau PHP).

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

Di input formulir Anda:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

Dengan input maks. (Ini di atas memungkinkan untuk nomor 12 digit)

2 solusi:

Gunakan validator formulir (misalnya dengan plugin validasi jQuery )

Lakukan pemeriksaan selama peristiwa onblur (yaitu ketika pengguna meninggalkan bidang) dari kolom input, dengan ekspresi reguler:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

Pendekatan yang lebih aman adalah memeriksa nilai input, daripada membajak penekanan tombol dan mencoba memfilter kode kunci.

Dengan cara ini pengguna bebas menggunakan panah keyboard, tombol pengubah, backspace, menghapus, menggunakan keyboar yang tidak standar, menggunakan mouse untuk menempelkan, menggunakan teks seret dan jatuhkan, bahkan menggunakan input aksesibilitas.

Skrip di bawah ini memungkinkan angka positif dan negatif

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}

<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

EDIT: Saya menghapus jawaban lama saya karena saya pikir itu sudah ketinggalan zaman sekarang.

Anda dapat menggunakan pola untuk ini:

<input id="numbers" pattern="[0-9.]+" type="number">

Di sini Anda dapat melihat kiat antarmuka situs web seluler yang lengkap .

Silakan temukan solusi yang disebutkan di bawah ini. Dalam pengguna ini dapat bisa masuk hanya numericnilai, juga pengguna tidak dapat dapat copy, paste, dragdan dropdi masukan.

Karakter yang Diizinkan

0,1,2,3,4,5,6,7,8,9

Karakter dan Karakter tidak diizinkan melalui acara

• Nilai alfabet
• Karakter spesial
• Salinan
• Tempel
• Menyeret
• Penurunan

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

Beri tahu saya jika itu tidak berhasil.

Jika Anda ingin menyarankan ke perangkat (mungkin ponsel) antara alfa atau numerik yang dapat Anda gunakan <input type="number">.

Satu lagi contoh di mana Anda hanya dapat menambahkan angka di bidang input, tidak bisa huruf

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

Implementasi singkat dan manis menggunakan jQuery dan replace () alih-alih melihat event.keyCode atau event.yang:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Hanya efek samping kecil bahwa huruf yang diketik muncul sebentar dan CTRL / CMD + A tampaknya berperilaku agak aneh.

input type="number" adalah atribut HTML5.

Dalam kasus lain, ini akan membantu Anda:

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

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

Kode JavaScript:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

Kode HTML:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

berfungsi dengan baik karena kode kunci backspace adalah 8 dan ekspresi regex tidak membiarkannya, jadi ini adalah cara mudah untuk mem-bypass bug :)

Cara mudah untuk mengatasi masalah ini adalah menerapkan fungsi jQuery untuk memvalidasi dengan regex karakter yang diketik dalam kotak teks misalnya:

Kode html Anda:

<input class="integerInput" type="text">

Dan fungsi js menggunakan jQuery

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });

<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>


		

Hanya varian lain yang menggunakan jQuery

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

cukup gunakan type = "number" sekarang atribut ini mendukung di sebagian besar browser

<input type="number" maxlength="3" ng-bind="first">

Anda juga dapat membandingkan nilai input (yang diperlakukan sebagai string secara default) dengan yang dipaksa sebagai numerik, seperti:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

Namun, Anda harus mengikatnya ke acara seperti keyup dll.

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

Saya melihat beberapa jawaban bagus namun saya suka mereka sekecil dan sesederhana mungkin, jadi mungkin seseorang akan mendapat manfaat dari itu. Saya akan menggunakan javascript Number()dan isNaNfungsionalitas seperti ini:

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

Semoga ini membantu.

Gunakan DOM ini:

<input type = "text" onkeydown = "validate(event)"/>

Dan skrip ini:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

... ATAU skrip ini, tanpa indexOf, menggunakan dua for...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

Saya menggunakan atribut onkeydown daripada onkeypress, karena atribut onkeydown diperiksa sebelum atribut onkeypress. Masalahnya ada di browser Google Chrome.

Dengan atribut "onkeypress", TAB akan menjadi tidak terkendali dengan "preventDefault" di google chrome, namun, dengan atribut "onkeydown", TAB menjadi terkendali!

Kode ASCII untuk TAB => 9

Skrip pertama memiliki lebih sedikit kode daripada yang kedua, namun, array karakter ASCII harus memiliki semua kunci.

Script kedua jauh lebih besar dari yang pertama, tetapi array tidak membutuhkan semua kunci. Digit pertama di setiap posisi array adalah berapa kali setiap posisi akan dibaca. Untuk setiap bacaan, akan bertambah 1 ke yang berikutnya. Sebagai contoh:




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




Dalam hal kunci numerik hanya 10 (0 - 9), tetapi jika jumlahnya 1 juta tidak masuk akal untuk membuat array dengan semua kunci ini.

Kode ASCII:

• 8 ==> (Backspace);
• 46 => (Hapus);
• 37 => (panah kiri);
• 39 => (panah kanan);
• 48 - 57 => (angka);
• 36 => (rumah);
• 35 => (akhir);

Ini adalah fungsi yang ditingkatkan:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

Cara terbaik (memungkinkan SEMUA jenis angka - nyata negatif, positif nyata, negatif iinteger, bilangan bulat positif) adalah:

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

Ini adalah versi lanjutan dari solusi geowa4 . Dukungan mindan maxatribut. Jika angkanya di luar kisaran, nilai sebelumnya akan ditampilkan.

Anda bisa mengujinya di sini.

Pemakaian: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

Jika inputnya dinamis, gunakan ini:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});