Le premier nombre entre à l'intérieur lorsque saisissez le dernier numéro dans la zone de texte

Lorsque je tape le dernier numéro , le premier va à l'intérieur du text-box(il disparaît), cela ajoute un espace supplémentaire.

Après avoir cliqué en dehors de, text-boxil semble bon dont j'ai besoin lors de la frappe du dernier caractère.

  #number_text {
        padding-left: 9px;
        letter-spacing: 31px;
        border: 0;
        background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%);
        background-position: left bottom;
        background-size: 38px 1px;
        background-repeat: repeat-x;
        width: 220px;
        box-sizing: border-box;
        outline:none;
    }

<input type="text" id="number_text" maxlength="6"  pattern="\d{6}" value="1234" >

Aidez-moi à sortir de ces problèmes. Merci

Ajoutez de l'espace pour un autre numéro et coupez l'entrée à l'aide clip-path

#number_text {
  padding-left: 9px;
  letter-spacing: 31px;
  border: 0;
  background: 
    repeating-linear-gradient(to right, #e1e1e1 0 26px, transparent 26px 38px)
    bottom/100% 1px no-repeat;
  width: 260px;
  clip-path:polygon(0 0, calc(100% - 38px) 0, calc(100% - 38px) 100%, 0 100%);
  box-sizing: border-box;
  outline: none;
}

<input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234">

Ou sans clip-path en réduisant la taille de l'arrière-plan:

#number_text {
  padding-left: 9px;
  letter-spacing: 31px;
  border: 0;
  background: 
    repeating-linear-gradient(to right, #e1e1e1 0 26px, transparent 26px 38px)
    bottom left/calc(100% - 38px) 1px no-repeat;
  width: 260px;
  box-sizing: border-box;
  outline: none;
}

<input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234">

Utilisez ce code. c'est bien travailler

var container = document.getElementsByClassName("wrap")[0];
    container.onkeyup = function(e) {
        var target = e.srcElement;
        var maxLength = parseInt(target.attributes["maxlength"].value, 6);
        var myLength = target.value.length;
        if (myLength >= maxLength) {
            var next = target;
            while (next = next.nextElementSibling) {
                if (next == null)
                    break;
                if (next.tagName.toLowerCase() == "input") {
                    next.focus();
                    break;
                }
            }
        }
     else if (myLength <= maxLength)
      {
        prev=target.previousElementSibling;
         while (prev = prev) {
            if (prev == null)
                break;
            if (prev.tagName.toLowerCase() == "input") {
                prev.focus();
                break;
            }
        }
      }

    }

.wrap input {
            border-top: 0;
            border-left: 0;
            border-right: 0;
            border-bottom: 1px solid #000;
            width: 3%;
            display: inline-block;
            outline: 0;
            text-align: center;
        }

<div class="wrap">
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
    </div>

Essayez d'ajouter ce script sous le champ de saisie:

<script>
  var oInput = document.getElementById('number_text');
  oInput.onkeypress = function(ev) {
    setTimeout(function() {
        if( oInput.value.length > 5 ) {
            oInput.setSelectionRange(0,0);
            oInput.blur();
        }
    }, 0);
  }
</script>

Celui-ci force votre curseur de saisie au début de la saisie après la saisie du 6ème caractère. J'ai également ajouté un flou () au champ pour que le curseur ne saute pas au début.

Le délai est également nécessaire. Sans cela, le caractère entré sera inséré au début. En savoir plus sur le timeout: setTimeout est-il une bonne solution pour faire des fonctions asynchrones avec javascript?

Vous pouvez y faire face en ajoutant un événement blur () de js onkeyup de la zone de saisie:

myFunction=()=>{
if(document.getElementById("number_text").value.length===6)
document.getElementById("number_text").blur();
}

 #number_text {
        padding-left: 9px;
        letter-spacing: 31px;
        border: 0;
        background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%);
        background-position: left bottom;
        background-size: 38px 1px;
        background-repeat: repeat-x;
        width: 220px;
        box-sizing: border-box;
        outline:none;
        overflow-y:hidden;
        overflow-x:hidden;
    }

<input type="text" id="number_text" maxlength="6"  pattern="\d{6}" value="1234" onkeyup="myFunction()" >
<br/>

Veuillez changer sur css ci-dessous (cela fonctionnera)

padding-left: 14px;

à

padding-left: 5px;

J'apprécie donc la réponse de Temani Afif à propos de l'utilisation du masque d'écrêtage. Je pense que c'est génial. Je voulais proposer une autre solution (un peu moins élégante). J'ai également utilisé Firefox pour tester ce problème, et cliquer en dehors de la zone de texte (perdre le focus) ne fait pas réapparaître le 1er chiffre ou la chaîne revient à la normale dans la saisie de texte.

Je crois que le problème est l'attribut css d'espacement des lettres que vous définissez:letter-spacing: 31px; et le fait que je pense que cela s'appliquerait au signe d'insertion "clignotant" que la plupart des navigateurs ont. En utilisant Chrome, il semble supprimer cela lorsqu'il perd le focus, tandis que Firefox le conserve même après avoir perdu le focus.

La 1ère solution consistait à appeler manuellement la fonction blur () pour faire perdre la focalisation à l'entrée. Cela fonctionne dans Chrome (en utilisant une fonction anonyme auto-exécutable):

<input type="text" id="number_text" maxlength="6" onkeyup="(function()
    {
      var x = document.getElementById('number_text');
      let value = x.value
      if (value.length >= 6){
        x.blur()
        return false
      }
    })();"
 pattern="\d{6}" value="1234" >

ou même en tant que fonction définie appelée par l'entrée number_text comme ceci:

<script>
 handleMaxInput = function(){
  var x = document.getElementById('number_text');
  let value = x.value
  if (value.length >= 6){
    x.blur()
    return false
  }
};
</script>

<input ... id='number_text' ... onkeyup="handleMaxInput()" ... >

Vous remarquerez un léger retard dans Chrome, mais l'appeler dans Firefox ne résoudra pas le problème.

Nous pouvons essentiellement forcer ce même comportement dans Firefox. Après avoir joué, j'ai pensé que Chrome rafraîchissait / recalculait l'espacement des lettres sur un flou. Ma session de jeu a montré que vous pouviez forcer Firefox à recalculer cette valeur par programme:

1. Modifiez le style en ligne de l'attribut d'espacement des lettres de l'entrée en une valeur différente (car nous ne pouvons pas modifier une classe CSS de number_text par programme sans trop d'effort, comme la réécriture de la balise de style entière dans la section style d'un document).
2. Supprimez le Class number_text de l'entrée.
   • 1 et 2 sont interchangeables, vous avez besoin de Firefox pour revenir uniquement au style en ligne que vous définissez, sans avoir les attributs de classe enregistrés «en mémoire».
3. Supprimez le style en ligne et réappliquez la classe CSS number_text. Cela forcera le navigateur à recalculer la séparation des lettres comme nous en avons besoin.

Dans le code, cela ressemblerait à la fonction JavaScript suivante:

handleMaxInput = function(){
        var x = document.getElementById('number_text');
        let value = x.value
        if (value.length >= 6){ // if the input is 6 or more characters
              x.classList.remove('number_text') // remove the class
              x.style.letterSpacing = '0px' // reset the spacing
              setTimeout(function() { // set time to let browser refresh updates
                  x.classList.add('number_text') // Re-add class after browser refresh
                  setTimeout(function() { // Remove inline-style after more reculculations
                      x.style.removeProperty('letter-spacing') // Remove inline style to let class styles apply
                      x.blur // optional, will force input field to lose focus. Else comment out to avoid that.
              }, (1)); // waits 1 millisecond
          }, (1)); // waits 1 millisecond
        }
    }

Il aura le même scintillement dans Firefox qu'avec Chrome, et tout ira bien.

Remarque : Les fonctions de délai d'attente permettent au navigateur de se rafraîchir et de mettre à jour ce dont nous avons besoin.

Remarque : Vous pouvez choisir d'appeler .blur () dans la fonction pour faire perdre le focus à la zone de texte, ou l'omettre et ils seront toujours dans le champ de saisie sans l'erreur avec les chiffres.

J'espère que cela aide votre compréhension conceptuelle, ainsi que la résolution du problème. D'autres personnes ont donné de bonnes solutions qui évitent le scintillement et fonctionnent à la fois dans Firefox et Chrome!

Cela ressemble à un problème d'interface utilisateur commun que j'ai rencontré auparavant.

Je parie que cela échoue également sur certaines plates-formes (c'est la nature de ce bug particulier.)

Sur certaines plates-formes, mais pas toutes, un caractère d'espacement est utilisé pour indiquer le curseur.

Sur certaines plates-formes, mais pas sur toutes, ce caractère est sans espacement, mais se superpose au caractère suivant, pas au dernier. Par conséquent, s'il n'y a pas de caractère suivant, l'espace sera rempli jusqu'à ce que la saisie soit terminée.

Dans ces deux cas, l'affichage agira de cette manière.

Il s'agit d'un cas où la meilleure solution est la solution la plus simple, adaptée à cette bizarrerie du système commun, et non la solution qui l'oblige à se comporter comme vous le souhaitez, comme certains l'ont suggéré. Cela est moins susceptible d'introduire des bogues et plus susceptible de fonctionner sur toutes les plates-formes.

La solution est de donner un peu de place à la fin de l'entrée pour afficher cela.

Augmentez la " largeur " à 230 ou 240 et vous devriez être bon.

De plus, vous pouvez encore mieux adapter les systèmes non standard, en particulier les systèmes d'accessibilité avec des polices ou des attributs de taille alternatifs, en détectant simplement la largeur en entrant des espaces pleine largeur dans la zone, en ajoutant un espace d'un quart de largeur à la fin, en les mesurant, puis en supprimant eux, ou simplement le truquer pour écraser les espaces pleine largeur que l'utilisateur tape (ou sinon saisit des données, ne présumez pas que c'est un clavier ou même quelque chose qui entre un caractère à la fois.)