Comment prévenir les caractères non valides à partir de la saisie dans les champs de saisie

Onkeydown, J'exécute le code JavaScript suivant:

function ThisOnKeyDown(el) {
   if (el.title == 'textonly') {
       !(/^[A-Za-zÑñ-\s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ-\s]/ig, '') : null;
   }
   if (el.title == 'numbersonly') {
       !(/^[0-9]*$/i).test(el.value) ? el.value = el.value.replace(/[^0-9]/ig, '') : null;
   }
   if (el.title == 'textandnumbers') {
       !(/^[A-Za-zÑñ0-9-\s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ0-9-\s]/ig, '') : null;
   }
}

L'un de ces trois attributs de titre est donné aux différents champs de saisie de la page. Le code fonctionne tellement bien que des caractères non valides sont correctement effacé, mais pas jusqu'à ce que le caractère suivant est entré. Je veux trouver un moyen d'interdire l'entrée non valide dans la première place. Je vous remercie de votre aide!

Modifier: je crée les événements à l'échelle mondiale. Voici comment j'ai procéder:

      function Globalization() {
      var inputs = document.getElementsByTagName('input');
      for (i = 0; i < inputs.length; i++) {
          inputs[i].onfocus = createEventHandler(
              ThisOnFocus, inputs[i]);
          inputs[i].onblur = createEventHandler(
              ThisOnBlur, inputs[i]);
          inputs[i].onkeydown = createEventHandler(
              ThisOnKeyDown, inputs[i]);
          inputs[i].onkeyup = createEventHandler(
              ThisOnKeyUp, inputs[i]);
      }
  }

Globalization() est exécuté body.onload

Par conséquent, un type de champ de saisie HTML, sans appels de fonction comme ceci:

          <input id="AppFirstName" style="width: 150px;" type="text" maxlength="30" title="textonly"/>

ajouter cette fonction à la fois OnKeyPress et OnKeyUp
Rappelez-vous juste que ce genre de validation n'est pas assez et vous avez toujours supprimer ce chars côté serveur.
l'ajout de Onkeyup donne un arrière-à la recherche de l'effet. (Onkeypress fait la même chose). Ce que je veux faire, c'est refuser l'entrée de leur apparition.

OriginalL'auteur Mike | 2011-11-26

20

Pour l'empêcher d'être placé en premier lieu, vous pouvez retourner false sur l'événement keydown gestionnaire, ainsi empêcher l'événement de se propager plus loin.

J'ai écrit l'exemple ci-dessous à l'aide de jQuery, mais vous pouvez utiliser la même fonction lors de la liaison traditionnellement.

Mais il est important de valider sur le côté serveur, côté client, la validation est importante pour la cause de la convivialité.
```
$("input.number-only").bind({
    keydown: function(e) {
        if (e.shiftKey === true ) {
            if (e.which == 9) {
                return true;
            }
            return false;
        }
        if (e.which > 57) {
            return false;
        }
        if (e.which==32) {
            return false;
        }
        return true;
    }
});
```
Pour référence, le code de la clé numéros (9, 57, 32 etc) représentent des caractères unicode, qui sont énumérés ici: en.wikipedia.org/wiki/List_of_Unicode_characters
Le " qui "de la propriété est maintenant obsolète, utilisez l'option" mot de code " à la place: developer.mozilla.org/en-US/docs/Web/Events/keydown

OriginalL'auteur user1034772

Le code ci-dessus ne dit - permet UNIQUEMENT de chiffres. Vous pouvez le modifier par l'ajout d'exception-à-dire de retour arrière, par exemple comme ceci

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            function keyispressed(e){
                var charval= String.fromCharCode(e.keyCode);
                if((isNaN(charValue)) && (e.which != 8 )){ //BSP KB code is 8
                    e.preventDefault();
                }
                return true;
            }
        </script>
    </head>

    <body>
        <input type="text" onkeydown="return keyispressed(event);"/>
    </body>
</html>

C'est un très bon point, oubliée par les autres.

OriginalL'auteur Michael Adekunle Salami

Code est utile pour prévenir l'utilisateur d'entrer n'importe quel caractère sauf le nombre.

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            function keyispressed(e){
                var charval= String.fromCharCode(e.keyCode);
                if(isNaN(charval)){
                    return false;
                }
                return true;
            }
        </script>
    </head>

    <body>
        <input type="text" onkeydown="return keyispressed(event);"/>
    </body>
</html>

A noter: Ce code empêche aussi des choses comme la touche retour arrière et caps+flèche de sélection.
Merci pour votre réponse! Il m'a aidé à réaliser que je devais retourner à la fonction dans le onkeydown dans l'ordre pour que cela fonctionne.

OriginalL'auteur akta kalariya

j'ai trouvé cette solution: http://help.dottoro.com/ljlkwans.php

fonctionne comme prévu.

<script type="text/javascript">
    function FilterInput (event) {
        var keyCode = ('which' in event) ? event.which : event.keyCode;

        isNumeric = (keyCode >= 48 /* KeyboardEvent.DOM_VK_0 */ && keyCode <= 57 /* KeyboardEvent.DOM_VK_9 */) ||
                    (keyCode >= 96 /* KeyboardEvent.DOM_VK_NUMPAD0 */ && keyCode <= 105 /* KeyboardEvent.DOM_VK_NUMPAD9 */);
        modifiers = (event.altKey || event.ctrlKey || event.shiftKey);
        return !isNumeric || modifiers;
    }
</script>

< body>
The following text field does not accept numeric input:
<input type="text" onkeydown="return FilterInput (event)" />< /body>

il permet de texte et !"#$%& mais vous pouvez l'ajuster en l'ajoutant aux validationto autoriser uniquement les nombres en retrait de la ! dans le retour

OriginalL'auteur rui

0

Exécuter votre code à l'encontre de l'événement onkeyup et non pas l'événement onkeydown. De cette façon, vous pouvez accéder au résultat de la dernière frappe où, comme le onkeyup événement s'exécute qu'une touche est pressée sans en connaître le résultat.

Je l'avais essayé. Il en fait un arrière-effet.
Il ne devrait pas. J'utilise cet événement sur mon propre application et il fonctionne très bien. Pour voir ce que je fais juste aller sur le lien suivant et de commencer à taper le code. prettydiff.com/?m=beautify
Pas sûr que même champ à regarder sur cette page, mais il ne fonctionne pas pour moi.

OriginalL'auteur austincheney
0
```
$('.key-filter').keypress(function () {
    if (event.key.replace(/[^\w\-.]/g,'')=='') event.preventDefault();
});
```
puis ajouter la clé de filtre de classe à votre entrée à l'aide de jquery
ou
```
<input type="text" onkeypress="if (event.key.replace(/[^\w\-.]/g,'')=='') event.preventDefault();" />
```
il suffit de mettre la charaters vous souhaitez autoriser l'intérieur de l' [] après l' ^.
cela permet à toutes les lettres des nombres _ - et .

Je préfère utiliser les regex méthode test() au lieu de remplacer les(). Aussi, de retour de faux est assez.

OriginalL'auteur user2415200

Vous devez vous connecter pour publier un commentaire.