web-dev-qa-db-fra.com

Moyen le plus simple de masquer les caractères dans la saisie de texte HTML (5)

HTML5 a-t-il une sorte de masquage de champ de texte ou dois-je encore intercepter onkeydown etc.?

jbabey a raison - "masquer" comme en bloquant certains caractères illégaux, sans cacher ce qui est tapé.

La meilleure façon (comme de la manière la plus simple et la plus fiable) que j'ai trouvée est de piéger onkeyup puis d'exécuter simplement un regex replace sur la valeur du champ de texte, en supprimant tous les caractères illégaux.

Cela présente quelques avantages:

  1. Il est facile à implémenter (une fonction, deux lignes de code).
  2. Il est fiable et couvre tous les cas auxquels j'ai pensé.
  3. Il ne bloque pas les raccourcis clavier comme copier/coller, sélectionner tout ou les touches fléchées.

Mais son principal inconvénient est qu'il montre brièvement le ou les caractères tapés avant de les supprimer, ce qui le rend très hackish et peu professionnel.

javascripthtmlhtml5masking
19
devios1

Recherchez le nouveau Types d'entrée HTML5 . Ces instructions indiquent aux navigateurs d'effectuer un filtrage côté client des données, mais l'implémentation est incomplète sur différents navigateurs. L'attribut pattern effectuera un filtrage de type regex, mais, encore une fois, les navigateurs ne le prennent pas totalement (ou pas du tout) en charge.

Cependant, ceux-ci ne bloqueront pas l'entrée elle-même, cela empêchera simplement de soumettre le formulaire avec les données invalides. Vous devrez toujours intercepter l'événement onkeydown pour bloquer la saisie des touches avant qu'il ne s'affiche à l'écran.

10
saluce

  1. La validation de base peut être effectuée en choisissant attribut type des éléments d'entrée. Par exemple: <input type="email" /> <input type="URL" /> <input type="number" />

  2. en utilisant l'attribut pattern comme: <input type="text" pattern="[1-4]{5}" />

  3. obligatoire attribut <input type="text" required />

  4. longueur max: <input type="text" maxlength="20" />

  5. min et max: <input type="number" min="1" max="4" />

7
user805125

Oui, selon les brouillons HTML5, vous pouvez utiliser l'attribut pattern pour spécifier l'entrée autorisée à l'aide d'une expression régulière. Pour certains types de données, vous pouvez utiliser des champs de saisie spéciaux tels que <input type=email>. Mais ces fonctionnalités manquent encore largement de support ou ont un support qualitativement médiocre.

6
Jukka K. Korpela

Un peu tard, mais un plugin utile qui utilisera en fait un masque pour donner un peu plus de restrictions sur l'entrée utilisateur.

<div class="col-sm-3 col-md-6 col-lg-4">
  <div class="form-group">
     <label for="addPhone">Phone Number *</label>
      <input id="addPhone" name="addPhone" type="text" class="form-control 
       required" data-mask="(999) 999-9999"placeholder>
    <span class="help-block">(999) 999-9999</span>
  </div>
</div>

 <!-- Input Mask -->
 <script src="js/plugins/jasny/jasny-bootstrap.min.js"></script>

enter image description here

Plus d'informations sur le plugin https://www.jasny.net/bootstrap/2.3.1/javascript.html#inputmask

3
Stephen Romero