Question Comment autoriser seulement numérique (0-9) dans la zone de saisie HTML en utilisant jQuery?


Je crée une page Web où j'ai un champ de texte d'entrée dans lequel je veux autoriser seulement des caractères numériques comme (0,1,2,3,4,5 ... 9) 0-9.

Comment puis-je faire cela en utilisant jQuery?


807


origine


Réponses:


Jetez un oeil à cette plug-in (plugin jquery numérique de Fork of texotela). Ceci (jStepper) est un autre.

Ce est un lien si vous voulez le construire vous-même.

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
             // Allow: Ctrl+A, Command+A
            (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || 
             // Allow: home, end, left, right, down, up
            (e.keyCode >= 35 && e.keyCode <= 40)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});

REMARQUE: Si votre page Web utilise HTML5, vous pouvez utiliser l'outil intégré <input type="number"> et utilisez le min et max propriétés pour contrôler la valeur minimale et maximale.


Ce qui suit est minimisé et permet également l'utilisation de CTRL+X, CTRL+C, et CTRL+V

$(function() {
  $('#staticParent').on('keydown', '#child', function(e){-1!==$.inArray(e.keyCode,[46,8,9,27,13,110])||(/65|67|86|88/.test(e.keyCode)&&(e.ctrlKey===true||e.metaKey===true))&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault()});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="staticParent">
	<input id="child" type="textarea" />
</div>


1124



Voici la fonction que j'utilise:

// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
            // home, end, period, and numpad decimal
            return (
                key == 8 || 
                key == 9 ||
                key == 13 ||
                key == 46 ||
                key == 110 ||
                key == 190 ||
                (key >= 35 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

Vous pouvez ensuite l'attacher à votre contrôle en faisant:

$("#yourTextBoxName").ForceNumericOnly();

159



En ligne:

<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

Style discret (avec jQuery):

$('input[name="number"]').keyup(function(e)
                                {
  if (/\D/g.test(this.value))
  {
    // Filter non-digits from input value.
    this.value = this.value.replace(/\D/g, '');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">


126



Vous pouvez simplement utiliser une simple expression régulière JavaScript pour tester les caractères purement numériques:

/^[0-9]+$/.test(input);

Cela retourne true si l'entrée est numérique ou false sinon.

ou pour un code d'événement, utilisation simple ci-dessous:

     // Allow: backspace, delete, tab, escape, enter, ctrl+A and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }

    var charValue = String.fromCharCode(e.keyCode)
        , valid = /^[0-9]+$/.test(charValue);

    if (!valid) {
        e.preventDefault();
    }

99



Vous pouvez utiliser sur l'événement d'entrée comme ceci:

$(document).on("input", ".numeric", function() {
    this.value = this.value.replace(/\D/g,'');
});

Mais, quel est ce privilège de code?

  • Cela fonctionne sur les navigateurs mobiles (keydown et keyCode ont un problème).
  • Cela fonctionne également sur le contenu généré par AJAX, car nous utilisons "on".
  • Meilleure performance que le keydown, par exemple sur un événement paste.

64



Utiliser la fonction JavaScript IsNaN,

if (isNaN($('#inputid').val()))

    if (isNaN (document.getElementById ('inputid'). val ()))

if (isNaN(document.getElementById('inputid').value))

Mettre à jour: Et voici un bel article en parler mais en utilisant jQuery: Restriction de l'entrée dans les zones de texte HTML aux valeurs numériques


43



Court et doux - même si cela ne trouvera jamais beaucoup d'attention après plus de 30 réponses;)

  $('#number_only').bind('keyup paste', function(){
        this.value = this.value.replace(/[^0-9]/g, '');
  });

40



$(document).ready(function() {
    $("#txtboxToFilter").keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
});

La source: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values


26