CSS: Créer iOS style Pin Mot de passe de la boîte de

Je veux créer une entrée html5 qui ressemble à l'iOS d'entrée du code Pin (sur l'écran de verrouillage).... avec 4 zones de saisie.

Comment puis-je y parvenir?

J'ai essayé le suivant:

1) Créé un normal de la zone de saisie.

2) a Retiré ses frontières.

3) Placé au-dessus de l'image comme arrière-plan de la zone d'entrée.

4) Et ajouté un peu de l'espacement des lettres.

Problème est: quand je tape les 3 premiers caractères, il s'inscrit dans les cases:

CSS: Créer iOS style Pin Mot de passe de la boîte de

Mais quand je tape le 4e caractère, les personnages se déplacent vers la gauche et par conséquent, il s'affiche comme ci-dessous:

CSS: Créer iOS style Pin Mot de passe de la boîte de

Que puis-je faire pour résoudre ce problème ?

Tout une meilleure approche ??

EDIT:

Ok basé sur la ci-dessous les réponses, j'ai modifié l'approche d'avoir 4 boîtes de saisie. Et sur keyup événement pour chaque zone de saisie, j'ai changer le l'accent à la prochaine zone de saisie.

Cela fonctionne bien sur le navigateur. Mais ne fonctionne pas sur l'appareil (iPhone 5). Quel est le problème ?

C'est un Sencha Touch app emballés à l'aide de Cordoue.

RÉSOLU:

Besoin de désactiver <preference name="KeyboardDisplayRequiresUserAction" value="false" />

Il serait bien si vous pouvez fournir une démo de violon.
Pouvez-vous poster le code que vous avez déjà? votre code html et css, un violon serait génial.
Pour javascript complet solution, consultez- stackoverflow.com/a/52176432/6719426

OriginalL'auteur senchaDev | 2013-11-21

7

Au lieu d'images, de 4 boîtes de saisie. Violon ici: http://jsfiddle.net/JLyn9/2/
```
<input type="password" maxlength=1 id="1" onkeyup="moveOnMax(this,'a')" />
<input type="password" maxlength=1 id="a" onkeyup="moveOnMax(this,'b')" />
<input type="password" maxlength=1 id="b" onkeyup="moveOnMax(this,'c')" />
<input type="password" maxlength=1 id="c" />

moveOnMax =function (field, nextFieldID) {
    if (field.value.length == 1) {
        document.getElementById(nextFieldID).focus();
    }
}
```
PS la JS fonction peut être optimisé.

MODIFIER/AVERTISSEMENT: Ce n'est pas une solution à ce problème. Merci de regarder les autres réponses

merci. je suis à l'aide de sencha touch pour créer l'entrée des composants.. donc mon code est un peu différent. mais j'ai eu l'idée.. et j'ai mis en œuvre de manière similaire. merci pour l'approche
Que faire si l'utilisateur veut utiliser la touche retour arrière pour supprimer le code pin et aller au champ précédent
Cela fonctionne terriblement. Vous devriez essayer quelque chose d'autre. Je vois aussi le problème de @EmptyData points.

OriginalL'auteur stackErr
4

Pas besoin de jQuery, beaucoup plus propre de l'OMI.

HTML
```
<form id="ios">
    <input type="password" maxlength="1" />
    <input type="password" maxlength="1"/>
    <input type="password" maxlength="1"/>
    <input type="password" maxlength="1"/>
</form>   
```
CSS
```
form#ios input[type=password]{
    height: 50px;
    width: 40px;
    text-align: center;
    font-size: 2em;
    border: 1px solid #000;
} 
```
Démo

http://jsfiddle.net/jerryhuangme/e9yhr/

Je n'ai pas utilisé jQuery pour des éléments de style 🙂 cette option est utilisée pour l'auto-focus
ah. Je devrais avoir RTFM. Juste vu $("input").keyup(function() et a me gratter la tête. C'est un joli extrait de conception de l'INTERFACE utilisateur. Du bon travail.
Héhé merci 🙂

OriginalL'auteur JerryHuang.me
3

Au lieu d'utiliser background-image à cette fin, l'utilisation de quatre input boîtes type définir de mot de passe, et que l'utilisation de jQuery pour réaliser certains plus de convivialité, si vous n'avez pas besoin de cette fonctionnalité de mise au point automatique à la zone suivante, vous pouvez tout simplement omettre le script et d'atteindre votre style..

Démo
```
input[type=password] {
    padding: 10px;
    border: 1px solid #ddd;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 30px;
}
```
jQuery (Facultatif pour les auto focus fonctionnalités)
```
$("input").keyup(function() {
    if($(this).val().length >= 1) {
      var input_flds = $(this).closest('form').find(':input');
      input_flds.eq(input_flds.index(this) + 1).focus();
    }
});
```
Serait bien de faire en sorte que la touche retour arrière serait revenir à l'entrée précédente.

OriginalL'auteur Mr. Alien
2

De garder le style propre,
Je vous suggère de créer 4 input boîtes.

Écrire un petit script pour se concentrer la prochaine zone de saisie lorsque l'utilisateur entre dans le caractère, dans l'actuelle zone de saisie.

OriginalL'auteur aBhijit

 <input type="tel" maxlength="1" tabindex="1" class="display-otp-box" data-key="otp1">
 <input type="tel" maxlength="1" tabindex="2" class="display-otp-box" data-key="otp2">
 <input type="tel" maxlength="1" tabindex="3" class="display-otp-box" data-key="otp3">
 <input type="tel" maxlength="1" tabindex="4" class="display-otp-box" data-key="otp4">


$('.display-otp-box').on('keyup', function (e) {
  var key = event.keyCode || event.charCode;

  /* for backspace, will move to the previous box */
  if( key === 8 || key === 46 ){
     $(this).prev('input').focus();
     return;
  }
  $(this).next('input').focus();
 });

type="tel" sur la borne d'entrée assurez-vous que le clavier numérique s'affiche lors de l'utilisation sur le téléphone
prochain sera centré automatiquement avec l'aide de la propriété tabindex.

OriginalL'auteur Parita Patel

Vous devez vous connecter pour publier un commentaire.

Démo