Fonction de saisie numérique jQuery qui limite la saisie aux nombres et aux points décimaux-js tutoriel-php.cn

Fonction de saisie numérique jQuery qui limite la saisie aux nombres et aux points décimaux

WBOY

Libérer： 2024-02-25 14:21:22

original

761 Les gens l'ont consulté

Fonction de saisie numérique jQuery qui limite la saisie aux nombres et aux points décimaux

Titre : Utiliser jQuery pour limiter la saisie numérique aux nombres et aux points décimaux

Dans le développement Web, nous rencontrons souvent des situations où nous devons limiter les utilisateurs à saisir uniquement des nombres et des points décimaux dans la zone de saisie. Afin de réaliser cette fonction, vous pouvez utiliser jQuery pour réaliser la limite numérique de la zone de saisie. Ce qui suit explique comment utiliser jQuery pour limiter la zone de saisie aux seuls nombres et points décimaux, et fournit des exemples de code spécifiques.

Tout d'abord, nous devons introduire la bibliothèque jQuery pour garantir que jQuery est correctement introduit dans la page Web. Ensuite, nous pouvons écrire le code jQuery suivant pour implémenter des restrictions de saisie numérique :

<!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>

Copier après la connexion

Dans ce code, nous utilisons d'abord la méthode $(document).ready() de jQuery pour nous assurer que le DOM a été exécuté. le code une fois le chargement terminé. Ensuite, nous avons lié un écouteur pour l'événement input à la zone de saisie avec la classe numeric-input Lorsque le contenu de la zone de saisie change, l'écouteur sera déclenché. événement. $(document).ready()方法来确保DOM已经加载完毕后再执行代码。接着，我们对带有numeric-input类的输入框绑定了一个input事件的监听器，当输入框中的内容发生改变时，会触发该事件。

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

Dans la fonction de gestionnaire d'événements, nous utilisons l'expression régulière /[^0-9.]/g pour faire correspondre tous les caractères qui ne sont pas des nombres et des points décimaux et les remplacer par des caractères vides. Cela implémente la fonction de limitation de la saisie uniquement de nombres et de points décimaux. Dans le même temps, nous avons également ajouté une logique garantissant qu'un seul point décimal peut être saisi afin d'empêcher l'utilisateur de saisir plusieurs points décimaux.

Grâce aux exemples de code ci-dessus, nous pouvons utiliser jQuery pour implémenter facilement la fonction de limitation de la saisie numérique dans la zone de saisie aux nombres et aux points décimaux, améliorant ainsi la précision et l'expérience de la saisie utilisateur. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Fonction de saisie numérique jQuery qui limite la saisie aux nombres et aux points décimaux