Input teks HTML hanya memungkinkan input numerik


852

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


81
Banyak solusi di sini hanya berfungsi ketika tombol ditekan. Ini akan gagal jika orang menempelkan teks menggunakan menu, atau jika mereka seret dan jatuhkan teks ke dalam input teks. Saya pernah digigit oleh itu sebelumnya. Hati-hati!
Bennett McElwee

83
@JuliusA - Anda selalu selalu memerlukan validasi sisi server.
Stephen P

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

14
@ Droogans pemberitahuan yang juga menonaktifkan kunci lain, seperti TAB untuk pergi ke input berikutnya atau pintasan lain yang tidak terlibat langsung dengan input seperti cmd + R untuk menyegarkan situs web jika input difokuskan.
Alejandro Pérez

1
Jika Anda setuju dengan Plugin, gunakan NumericInput. Demo: jsfiddle.net/152sumxu/2 Lebih detail di sini stackoverflow.com/a/27561763/82961
Faiz

Jawaban:


1137

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 .


4
Meskipun ini akan menjadi pilihan yang baik, ini masih memungkinkan untuk memasukkan karakter seperti /, banyak titik, operator lain, dll.
Mahendra Liya

6
Masih tidak didukung oleh Firefox 21 (Saya bahkan tidak berbicara tentang IE9 atau versi sebelumnya ...)
JBE

67
Nomor tipe input tidak dimaksudkan untuk digunakan agar input Anda hanya menerima angka. Ini dimaksudkan untuk input yang menentukan 'jumlah item'. Chrome misalnya menambahkan dua panah kecil untuk menambah jumlah satu per satu. Input numerik-satunya yang tepat adalah semacam penghilangan konyol untuk HTML.
Erwin

9
Jenis = "angka" sebenarnya tidak mencegah memasukkan teks yang tidak valid ke dalam bidang; Tampaknya Anda bahkan dapat memotong dan menempelkan data sampah ke dalam bidang, bahkan di chrome.
perfeksionis

6
Satu-satunya hal yang akan saya tambahkan ke ini adalah mengubah baris Ctrl + A untuk memasukkan pengguna MacOSX:(e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true))
MForMarlon

281

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

12
Jerman-pengaturan pada eeepc 900. beberapa kunci untuk penggunaan yang baik tidak berfungsi: - backspace (keyCode: 8) - tombol navigasi kiri dan kanan (keyCode: 37, 38) salin dan tempel juga dimungkinkan ...
Michael Piendl

11
Kebanyakan orang benar-benar peduli, memiliki kesalahan skrip muncul mencerminkan buruk di situs Anda.
Robert Jeppesen

14
beberapa masalah dengan kode ini. Kamu dapat masuk . lebih dari satu kali, kedua itu tidak memungkinkan tombol hapus, ada solusi?
coure2011

4
Saya peduli tentang backspace, menghapus dan panah tidak berfungsi. Jika Anda menghapus "theEvent.keycode ||", dan menambahkan: "if (/ [- ~] / &&! Regex.test (key)) {" maka itu berfungsi lebih baik (untuk ASCII / UTF tetap). Tapi itu tidak akan menolak karakter Cina! :)
Sam Watkins

4
ini memungkinkan seseorang menempelkan hal-hal acak ke input
Vitim.us

137

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

4
input type = "number" akan hadir dalam HTML 5 - dan Anda bisa menggunakan JavaScript sebagai polyfill yang mundur ... stevefenton.co.uk/Content/Blog/Date/201105/Blog/…
Fenton

5
Metode yang baik tetapi dapat dipatahkan dengan menekan dan menahan kunci yang tidak dapat diterima
Scott Brown

8
Ubah regex ke /[^\d+]/dan berfungsi dengan menahan
boecko

11
@ Boecko terima kasih untuk ini, tetapi perhatikan bahwa itu seharusnya /[^\d]+/. Solusi yang bagus. Juga @ user235859
Mosselman

11
Dia ingin mengizinkan .juga. Anda harus benar-benar membuatnya/[^0-9.]/g
Qsario

94

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


12
Menangani: salin + tempel, seret 'n jatuhkan, hanya memungkinkan 1 desimal, tab, hapus, mundur - gunakan yang ini
Matematika

Bisakah logika di dalam input ini diekstraksi sehingga dapat digunakan secara global?
ema

@ema - ya, lihat jawaban saya yang lain di sini yang menunjukkan bagaimana Anda bisa menerapkan aturan menggunakan kelas.
billynoah

jika Anda menggunakan ini pada formulir sudut nilai tidak akan memperbarui dalam nilai kontrol formulir.
Ale_info

Luar biasa. Saya mengubah acara ke this.value = this.value.replace (/ [^ 0-9 .-] / g, '') .replace (/((....*)*./ g, '$ 1'). ganti (/ ^ 0 + / g, ''). ganti (/ (? <! ^) - / g, ''); Dengan cara ini ia hanya menangani - di awal dan tidak memungkinkan 0 di awal nomor.
brenth

54

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


Bagaimana dengan teks yang ditempel?
Jason Ebersey

Mengapa saya mendapatkan "acara tidak terdefinisi" ketika saya memanggil fungsi ini?
Vincent

1
ini tidak berfungsi di Firefox ketika event.keyCode selalu dikembalikan 0. Saya memperbaiki dengan kode baru: function validateNumber (event) {var key = event.which || event.charCode || event.keyCode || 0; if (key == 8 || key == 46 || key == 37 || key == 39) {return true; } else if (key <48 || key> 57) {return false; } mengembalikan true; };
Luan Nguyen

1
Seperti kata @Jessica, Anda dapat menambahkan tanda kutip dan bahkan persentase.
Alejandro Nava

1
Sangat dekat! tetapi memungkinkan lebih dari satu desimal.
kross

52

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.


Inilah dokumen yang mendefinisikan browser mana yang mendukung atribut ini: caniuse.com/input-number . Pada saat penulisan ini, Chrome dan Safari keduanya sepenuhnya mendukung bidang jenis ini. IE 10 memiliki dukungan parsial, dan Firefox tidak memiliki dukungan.
Nathan Wallace

Satu-satunya masalah dengan type=numberadalah yang tidak didukung oleh IE9
J Rod

@JRod Ada polyfill untuk IE lama. Info lebih lanjut di sini .
jkdev

6
Masalah pertama type=numberadalah membiarkan echar karena dianggap e+10sebagai angka. Masalah kedua adalah bahwa Anda tidak dapat membatasi jumlah karakter dalam input.
Hakan Fıstık

Masalah lain adalah bahwa jika jenisnya adalah angka maka saya tidak dapat memperoleh manfaat dari pengaturan jenisnya, misalnya: "tel".
ScottyBlades

49

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

jQuery 1.7+ dibutuhkan. Ini adalah jawaban yang lebih lengkap karena menerima input akun melalui "copy". Dan itu juga lebih sederhana!
Memochipan

Regex alternatif: replace(/[^\d]+/g,'')Ganti semua non-digit dengan string kosong. Pengubah "i" (tidak sensitif huruf) tidak diperlukan.
Memochipan

Ini harusnya di atas, karena penangan event "onkey" dalam tag tidak boleh disebarkan lagi ...
gpinkas

Yang ini jelas merupakan jawaban terbaik di sini tetapi tidak memungkinkan angka dengan angka desimal. Adakah yang bisa melakukannya?
Atirag

6
@Atirag Jika Anda ingin desimal, Anda dapat mengubah regex/[^\d,.]+/
EJTH

41

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


Jawaban luar biasa ... +1. Anda juga dapat mengurangi pernyataan if ke: return !(charCode > 31 && (charCode < 48 || charCode > 57));
schadeck

7
Bagaimana kalau menghapus? Anda ingin angka tetapi Anda mungkin ingin orang dapat memperbaikinya tanpa menyegarkan halaman ...
Martin Erlic

40

HTML5 mendukung regex, sehingga Anda dapat menggunakan ini:

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

Peringatan: Beberapa browser belum mendukung ini.


7
HTML5 juga punya <input type=number>.
Mathias Bynens

Benar. Anda harus membuat ini sebagai jawaban. Ooops, @ Ms2ger sudah punya.
james.garriss

<Input type = number> menambahkan panah untuk menambah dan mengurangi pada browser tertentu jadi ini sepertinya solusi yang baik ketika kita ingin menghindari pemintal
Ayrad

35
Pola hanya diperiksa saat kirim. Anda masih bisa memasukkan huruf.
Erwin

Apa +artinya dalam atribut pola?
PlanetHackers

18

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

Tidak berfungsi dengan benar pada keyboard di mana seseorang harus menggunakan tombol shift untuk memasukkan angka (misalnya keyboard AZERTY Eropa).
Kapten Sensible

Terima kasih kawan, Anda benar-benar mengerti pertanyaan! Contoh yang bagus dan penanganan tentunya. atau, (yang diinginkan kebanyakan orang jika mereka bekerja dengan angka)
real_yggdrasil

Ini adalah satu-satunya yang berfungsi yang mencegah menempelkan nilai non numerik.
DEREK LEE

16

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)


Jangan lakukan itu! Ini memblokir semuanya, numpad, tombol panah, tombol Delete, pintasan (CTRL + A, CTRL + R misalnya), bahkan tombol TAB yang BENAR-BENAR anoying!
Korri

@ Korri Saya tidak mengikuti, apa masalahnya? Itu berhasil dengan baik dalam kasus saya.
uneakharsh

baris pertama harus diubah ke:var charCode = (evt.which) ? evt.which : evt.keyCode;
peiman F.

15

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

Menariknya, saya harus memberikan regex adalah "^ \\ d \\.? \\ d * $", tapi itu mungkin karena halaman dijalankan melalui transformasi XSLT.
Paul Tomblin

Saya pikir ungkapan reguler tidak benar. Saya menggunakan baris ini:var regExpr = /^\d+(\.\d*)?$/;
costa

@costa tidak yakin, apakah pengguna ingin memasukkan .123(bukan 0.123) misalnya?
Romain Linsolas

@romaintaz. Anda benar, tetapi kemudian Anda harus mengubah ekspresi reguler untuk memastikan bahwa jika tidak ada angka di depan titik ada angka setelah titik. Sesuatu seperti ini: var regExpr = /^\d+(\.\d*)?$|^\.\d+$/;.
Costa

14

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.


Ini memang tampaknya mencakup sebagian besar kasus
Zia Ul Rehman Mughal


13

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.


11

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


11

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

10

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.


9

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

baris pertama harus diubah ke:var charCode = (evt.which) ? evt.which : evt.keyCode;
peiman F.

9

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


9

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


		


8

Hanya varian lain yang menggunakan jQuery

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

8

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

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

Saya belum memeriksa data --1(2 karakter minus sebelum 1).
Ngoc Nam

6

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.


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

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

6

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.


1
Aku suka ini! Solusi yang elegan, tanpa melibatkan regex.
Levi Roberts

Ini bukan jawaban untuk pertanyaan, OP diminta hanya mengizinkan teks pada input, bukan memverifikasi setelah itu.
Timberman

Ya, itu benar! Tapi sudah ada jawaban yang diterima yang menurut saya bagus, tapi saya pikir ini bisa membantu seseorang, plus bagus dan bersih.
Sicha

5

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

5

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

4

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

4

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

@UserB ini seharusnya tidak menghapus apa pun.
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.