jQuery fungsi input berangka yang mengehadkan input kepada nombor dan titik perpuluhan-tutorial js-php.cn

jQuery fungsi input berangka yang mengehadkan input kepada nombor dan titik perpuluhan

WBOY

Lepaskan： 2024-02-25 14:21:22

asal

849 orang telah melayarinya

jQuery fungsi input berangka yang mengehadkan input kepada nombor dan titik perpuluhan

Tajuk: Gunakan jQuery untuk mengehadkan input berangka kepada nombor dan titik perpuluhan

Dalam pembangunan web, kami sering menghadapi situasi di mana kami perlu mengehadkan pengguna kepada hanya memasukkan nombor dan titik perpuluhan dalam kotak input. Untuk mencapai fungsi ini, anda boleh menggunakan jQuery untuk merealisasikan had berangka kotak input. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengehadkan kotak input kepada nombor dan titik perpuluhan sahaja, dan memberikan contoh kod khusus.

Pertama, kita perlu memperkenalkan perpustakaan jQuery untuk memastikan bahawa jQuery diperkenalkan dengan betul ke dalam halaman web. Seterusnya, kita boleh menulis kod jQuery berikut untuk melaksanakan sekatan input berangka:

<!DOCTYPE html>
<html>
<head>
    <title>数值输入限制为数字和小数点</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.numeric-input').on('input', function () {
                // 将输入框的值设为数字和小数点之外的字符替换为空
                $(this).val($(this).val().replace(/[^0-9.]/g, ''));
                
                // 确保只能输入一个小数点
                if ($(this).val().indexOf('.') !== $(this).val().lastIndexOf('.')) {
                    $(this).val($(this).val().slice(0, -1));
                }
            });
        });
    </script>
</head>
<body>
    <input type="text" class="numeric-input" placeholder="只能输入数字和小数点">
</body>
</html>

Salin selepas log masuk

Dalam kod ini, kita mula-mula menggunakan kaedah $(document).ready() jQuery untuk memastikan DOM telah Dilaksanakan kod selepas memuatkan selesai. Seterusnya, kami mengikat pendengar untuk acara input ke kotak input dengan kelas numeric-input Apabila kandungan dalam kotak input berubah, pendengar akan dicetuskan. peristiwa. $(document).ready()方法来确保DOM已经加载完毕后再执行代码。接着，我们对带有numeric-input类的输入框绑定了一个input事件的监听器，当输入框中的内容发生改变时，会触发该事件。

在事件处理函数中，我们使用正则表达式/[^0-9.]/g

Dalam fungsi pengendali acara, kami menggunakan ungkapan biasa /[^0-9.]/g untuk memadankan semua aksara yang bukan nombor dan titik perpuluhan dan menggantikannya dengan aksara kosong. Ini melaksanakan fungsi mengehadkan input nombor dan titik perpuluhan sahaja. Pada masa yang sama, kami juga menambah logik untuk memastikan hanya satu titik perpuluhan boleh dimasukkan untuk menghalang pengguna daripada memasukkan berbilang titik perpuluhan.

Melalui contoh kod di atas, kami boleh menggunakan jQuery untuk melaksanakan fungsi mengehadkan input berangka dengan mudah dalam kotak input kepada nombor dan titik perpuluhan, meningkatkan ketepatan dan pengalaman input pengguna. 🎜

Atas ialah kandungan terperinci jQuery fungsi input berangka yang mengehadkan input kepada nombor dan titik perpuluhan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!