O primeiro número entra quando o último número é digitado na caixa de texto

Quando digito o último número , o primeiro número entra no text-box(desaparece), adicionando um espaço extra.

Depois de clicar fora text-box, fica bem o que eu preciso durante a digitação do último caractere.

  #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" >

Ajude-me a sair dessas questões. obrigado

Adicione espaço para outro número e recorte a entrada usando 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 sem o caminho do clipe, reduzindo o tamanho do plano de fundo:

#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">

Use este código. é um bom trabalho

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>

Tente adicionar este script abaixo do campo de entrada:

<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>

Este força o cursor de entrada para o início da entrada após o sexto caractere ter sido inserido. Também adicionei um blur () ao campo para que o cursor pule para o início não se destaque.

O tempo limite também é necessário. Sem ele, o caractere inserido será inserido no início. Mais sobre o tempo limite: o setTimeout é uma boa solução para executar funções assíncronas com javascript?

Você pode lidar com isso adicionando um evento blur () de js onkeyup da caixa de entrada:

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/>

Altere no css abaixo (funcionará)

padding-left: 14px;

para

padding-left: 5px;

Então, eu gosto da resposta de Temani Afif sobre o uso da máscara de recorte. Acha ótimo. Eu queria propor outra solução (um pouco menos elegante). Eu usei o Firefox também para testar esse problema, e clicar fora da área de texto (perdendo o foco) não faz o primeiro dígito reaparecer ou a string voltar ao normal na entrada de texto.

Acredito que o problema seja o atributo css de espaçamento entre letras que você definiu: letter-spacing: 31px;e o fato de acreditar que isso se aplicaria ao cursor "piscante" que a maioria dos navegadores possui. Usando o Chrome, parece remover isso quando ele perde o foco, enquanto o Firefox mantém isso mesmo depois de perder o foco.

A primeira solução foi usar a chamada manual da função blur () para fazer com que a entrada perca o foco. Isso funciona no Chrome (usando uma função anônima de execução automática):

<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 mesmo como uma Função Definida chamada pela entrada number_text da seguinte maneira:

<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()" ... >

Você notará um pequeno atraso no Chrome, mas chamar isso no Firefox não resolverá o problema.

Podemos essencialmente forçar esse mesmo comportamento no Firefox. Depois de algumas brincadeiras, percebi que o Chrome estava atualizando / recalculando o espaçamento das letras em um borrão. Minha sessão de jogo mostrou que você pode forçar o Firefox a recalcular esse valor programaticamente:

1. Altere o estilo embutido do atributo de espaçamento entre letras da entrada para um valor diferente (como não podemos editar uma classe CSS de number_text programaticamente sem muito esforço, como reescrever a marca de estilo inteira na seção de estilo de um documento).
2. Remova a classe number_text da entrada.
   • 1 e 2 são intercambiáveis, você precisa que o Firefox faça o fallback apenas para o estilo embutido definido, sem ter os atributos de classe salvos 'na memória'.
3. Remova o estilo embutido e aplique novamente a classe CSS number_text. Isso forçará o navegador a recalcular a separação de letras conforme necessário.

No código, seria semelhante à seguinte função JavaScript:

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
        }
    }

Ele terá a mesma cintilação no Firefox e no Chrome, e tudo ficará bem.

Nota : As funções de tempo limite são para dar tempo ao navegador para atualizar e realmente atualizar o que precisamos.

Nota : Você pode optar por chamar .blur () na função para fazer a caixa de texto perder o foco ou omitir isso, e eles ainda estarão no campo de entrada sem o erro dos dígitos.

Espero que isso ajude sua compreensão conceitual, bem como a solução do problema. Outras pessoas deram boas soluções que evitam toda a cintilação e funcionam no Firefox e no Chrome!

Parece um problema comum de interface do usuário que eu já encontrei antes.

Aposto que também falha apenas em algumas plataformas (essa é a natureza desse bug específico).

Em algumas plataformas, mas não em todas, um caractere de espaçamento é usado para indicar o cursor.

Em algumas plataformas, mas não em todas, esse caractere não tem espaçamento, mas sobrepõe, no caractere seguinte, não no último. Portanto, se não houver um próximo caractere, será preenchido com o espaço até que a entrada seja concluída.

Nos dois casos, o display atuará dessa maneira.

Este é um caso em que a melhor solução é a solução mais simples, acomodando essa peculiaridade comum do sistema, não a solução que o obriga a se comportar da maneira que você deseja, como sugeriram algumas pessoas. É menos provável que isso introduza erros e mais provavelmente funcione em todas as plataformas.

A solução é fornecer um pouco de espaço livre no final da entrada para exibir isso.

Aumente a " largura " para 230 ou 240 e você deve ser bom.

Além disso, você pode acomodar ainda mais sistemas não-padrão, especialmente sistemas de acessibilidade com fontes ou atributos de tamanho alternativos, simplesmente detectando a largura inserindo espaços de largura total na área, adicionando um quarto de largura no final, medindo-os e excluindo ou simplesmente manipulá-lo para substituir os espaços de largura total à medida que o usuário digita (ou, de outra forma, insere dados, não presuma que seja um teclado ou mesmo algo que insira um caractere de cada vez).