Pengesahan jQuery: hadkan input kepada nombor dan titik perpuluhan-tutorial js-php.cn

Pengesahan jQuery: hadkan input kepada nombor dan titik perpuluhan

王林

Lepaskan： 2024-02-24 11:33:30

asal

1129 orang telah melayarinya

Pengesahan jQuery: hadkan input kepada nombor dan titik perpuluhan

Pengesahan jQuery: Hanya nombor dan titik perpuluhan dibenarkan untuk dimasukkan pengguna hanya memasukkan nombor dan titik perpuluhan. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mencapai fungsi ini dan menyediakan contoh kod khusus.

Analisis Keperluan

Semasa proses pembangunan, kadangkala pengguna dikehendaki memasukkan nombor dan titik perpuluhan sahaja, seperti kotak input amaun, kotak input kuantiti, dsb. Untuk memastikan ketepatan data dan penyeragaman format, kami perlu mengehadkan input pengguna.

Penyelesaian

Kami boleh menggunakan jQuery digabungkan dengan ungkapan biasa untuk mengehadkan input pengguna. Pertama, kita perlu menentukan sama ada aksara yang dimasukkan oleh pengguna memenuhi keperluan dalam acara penekan kekunci kotak input Jika mereka tidak memenuhi keperluan, sekat acara lalai. Kemudian, sekiranya kotak input kabur, kami boleh memproses kandungan yang dimasukkan oleh pengguna untuk memastikan kandungan input memenuhi keperluan.

Contoh kod khusus

Berikut ialah kod contoh mudah yang melaksanakan sekatan bahawa hanya nombor dan titik perpuluhan dibenarkan untuk dimasukkan dalam kotak input:

<!DOCTYPE html>
<html>
<head>
  <title>Pengesahan jQuery: hadkan input kepada nombor dan titik perpuluhan</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <input type="text" id="numberInput" placeholder="只能输入数字和小数点">
  
  <script>
    $(document).ready(function(){
      $('#numberInput').keypress(function(event){
        var charCode = (event.which) ? event.which : event.keyCode;
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
          event.preventDefault();
        } else {
          return true;
        }
      });
      
      $('#numberInput').blur(function(){
        var inputValue = $(this).val();
        var newValue = inputValue.replace(/[^0-9.]/g, '');
        $(this).val(newValue);
      });
    });
  </script>
</body>
</html>

Salin selepas log masuk

Dalam kod ini, kami mula-mula memperkenalkan perpustakaan jQuery dan mencipta Kotak input, id ialah numberInput. Dalam acara sedia, kami memantau peristiwa penekan kekunci kotak input untuk menentukan sama ada kandungan input memenuhi keperluan dalam acara kabur, kami selanjutnya memproses kandungan input untuk mengalih keluar aksara yang tidak memenuhi syarat;

Ringkasan

Melalui contoh kod di atas, kami boleh melaksanakan sekatan ke atas kandungan input pengguna dan memastikan kandungan input memenuhi keperluan. Dalam pembangunan sebenar, kod boleh diubah suai dan diselaraskan mengikut keperluan khusus untuk memenuhi keperluan senario yang berbeza. Saya harap artikel ini berguna kepada anda, terima kasih kerana membaca!

Atas ialah kandungan terperinci Pengesahan jQuery: hadkan input kepada nombor dan titik perpuluhan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!