web-dev-qa-db-fra.com

Comment forcer l'entrée pour autoriser uniquement les lettres Alpha?

en utilisant jQuery ici, mais impossible d'empêcher la saisie de nombres dans le champ de saisie

http://codepen.io/leongaban/pen/owbjg

Contribution

<input type="text" name="field" maxlength="8"
    title="Only Letters"
    value="Type Letters Only"
    onkeydown="return alphaOnly(event);"
    onblur="if (this.value == '') {this.value = 'Type Letters Only';}"
    onfocus="if (this.value == 'Type Letters Only') {this.value = '';}"/>

jQuery

function alphaOnly(event) {

  alert(event);

  var key;

  if (window.event) {
    key = window.event.key;
  } else if (e) {
    key = e.which;
  }
  //var key = window.event.key || event.key;
  alert(key.value);
  return ((key >= 65 && key <= 90) || (key >= 95 && key <= 122));

}

J'ai vu beaucoup d'exemples ici sur la façon de limiter uniquement les nombres et j'utilise les codes de clé corrects pour a-z et A-Z. Voyez-vous ce que je fais mal?

javascriptjqueryinputinput-field
12
Leon Gaban

La propriété event.key m'a donné une valeur indéfinie. Au lieu de cela, j'ai utilisé event.keyCode:

function alphaOnly(event) {
  var key = event.keyCode;
  return ((key >= 65 && key <= 90) || key == 8);
};

Notez que la valeur 8 correspond à la touche Retour arrière.

13
hexacyanide

Plutôt que de compter sur des codes de clé, ce qui peut s'avérer fastidieux, vous pouvez utiliser des expressions régulières. En modifiant le modèle, nous pouvons facilement limiter les entrées pour répondre à nos besoins. Notez que cela fonctionne avec l’événement keypress et permet l’utilisation du retour arrière (comme dans la réponse acceptée). Cela n'empêchera pas les utilisateurs de coller des caractères "illégaux".

function testInput(event) {
   var value = String.fromCharCode(event.which);
   var pattern = new RegExp(/[a-zåäö ]/i);
   return pattern.test(value);
}

$('#my-field').bind('keypress', testInput);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
   Test input:
   <input id="my-field" type="text">
</label>

7
Robin Keskisarkka

ONELINER court:

<input ... onkeypress="return /[a-z]/i.test(event.key)" >

Pour toutes les lettres unicode essayez ceci regexp : /\p{L}/u ( mais ... this ) - et voici exemple de travail :)

3
Kamil Kiełczewski

Sur les nouveaux navigateurs, vous pouvez utiliser:

<input type="text" name="country_code" 
    pattern="[A-Za-z]" title="Three letter country code">

Vous pouvez utiliser des expressions régulières pour restreindre les champs de saisie.

3
jsbisht
<input type="text" name="field" maxlength="8"
    onkeypress="return onlyAlphabets(event,this);" />

function onlyAlphabets(e, t) {
            try {
                if (window.event) {
                    var charCode = window.event.keyCode;
                }
                else if (e) {
                    var charCode = e.which;
                }
                else { return true; }
                if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
                    return true;
                else
                    return false;
            }
            catch (err) {
                alert(err.Description);
            }
        }
2
Pankaj Upadhyay

Nice one-liner HTML uniquement:

 <input type="text" id='nameInput' onkeypress='return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))'>
1
Dustin Spengler