Gunakan jQuery untuk melaksanakan kotak input yang hanya membenarkan nombor dan titik perpuluhan untuk dimasukkan

Laksanakan kotak input jQuery untuk mengehadkan input nombor dan titik perpuluhan

Dalam pembangunan web, kami sering menghadapi keperluan untuk mengawal input kandungan oleh pengguna dalam kotak input, seperti mengehadkan input nombor dan titik perpuluhan . Sekatan ini boleh dicapai melalui JavaScript dan jQuery. Berikut akan memperkenalkan cara menggunakan jQuery untuk melaksanakan fungsi mengehadkan input nombor dan titik perpuluhan dalam kotak input.

1. Struktur HTML

Pertama, kita perlu mencipta kotak input dalam HTML Kodnya adalah seperti berikut:

<input type="text" id="inputNumber" placeholder="只能输入数字和小数点">

Di sini kita mencipta kotak input dengan id "inputNumber" dan menetapkan atribut pemegang tempat kepada "Nombor sahaja. boleh dimasukkan dan titik perpuluhan" untuk menggesa pengguna memasukkan nombor dan titik perpuluhan sahaja.

2. jQuery melaksanakan fungsi sekatan input

Seterusnya, kami menggunakan jQuery untuk melaksanakan fungsi sekatan input. Kodnya adalah seperti berikut:

$(document).ready(function(){
  $('#inputNumber').keypress(function(event) {
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
      event.preventDefault();
    } else {
      var input = $(this).val();
      if ((charCode == 46 && input.indexOf('.') !== -1) || (charCode == 46 && input === "")) {
        event.preventDefault();
      }
    }
  });
});

Dalam kod di atas, mula-mula gunakan $(document).ready()函数来确保DOM加载完毕后再执行jQuery代码。然后通过keypress()函数来监听输入框的键盘按下事件。在事件处理函数中，通过event.which或event.keyCode untuk mendapatkan kod ASCII kekunci, dan kemudian tentukan sama ada input ialah nombor atau titik perpuluhan, dan jika tidak, halang peristiwa lalai.

Perlu diingat bahawa untuk mengendalikan situasi titik perpuluhan, jika kotak input sudah mempunyai titik perpuluhan, input titik perpuluhan sekali lagi atau input titik perpuluhan pada permulaan kotak input perlu dihalang.

3. Uji

Akhir sekali, mari uji kod. Buka halaman HTML yang mengandungi kod di atas dalam penyemak imbas dan cuba masukkan aksara lain dalam kotak input untuk memastikan hanya nombor dan titik perpuluhan boleh dimasukkan.

Melalui operasi ini, kita boleh menggunakan jQuery untuk mengehadkan kotak input kepada nombor dan titik perpuluhan sahaja. Ini boleh membantu pengguna memasukkan spesifikasi dan meningkatkan pengalaman pengguna dengan berkesan. Saya harap kandungan di atas dapat membantu anda melaksanakan fungsi yang sepadan.

Atas ialah kandungan terperinci Gunakan jQuery untuk melaksanakan kotak input yang hanya membenarkan nombor dan titik perpuluhan untuk dimasukkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!