テキストボックスに最後の数字を入力すると最初の数字が入ります

最後の数字を入力すると、最初の数字が内部に入りtext-box（消えます）、スペースが1つ追加されます。

外側をクリックした後、text-box最後の文字を入力するときに必要な見栄えが良くなります。

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

この問題から抜け出すのを手伝ってください。ありがとう

別の数値用のスペースを追加し、次を使用して入力をクリップします 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">

または、background-sizeを減らしてクリップパスなし：

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

このコードを使用します。そのうまくいく

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>

入力フィールドの下にこのスクリプトを追加してみてください。

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

これは、6番目の文字が入力された後、入力カーソルを入力の先頭に強制します。また、フィールドにblur（）を追加して、最初へのカーソルジャンプが飛び出さないようにしました。

タイムアウトも必要です。これがないと、入力した文字が最初に挿入されます。タイムアウトの詳細：setTimeoutは、JavaScriptで非同期関数を実行するための優れたソリューションですか？

入力ボックスのjs onkeyupのblur（）イベントを追加することで対処できます。

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

以下のCSSで変更してください（動作します）

padding-left: 14px;

に

padding-left: 5px;

だからクリッピングマスクの使用に関するTemani Afifの答えが好きです。それは素晴らしいと思います。私は別の解決策を提案したいと思いました（少しエレガントではありません）。私はFirefoxを使用してこの問題もテストしました。テキスト領域の外側（フォーカスを失う）をクリックしても、1桁目が再表示されないか、テキスト入力の文字列が通常に戻ります。

問題はあなたが設定した文字間隔のcss属性letter-spacing: 31px;であると私は信じています。そして、これはほとんどのブラウザが持っている「点滅」キャレットに当てはまると私が信じているという事実です。Chromeを使用すると、フォーカスを失ったときにこれを削除するように見えますが、Firefoxはフォーカスを失った後もこれを保持します。

最初の解決策は、blur（）関数を手動で呼び出して、入力がフォーカスを失うようにすることでした。これはChromeで動作します（自己実行匿名関数を使用）：

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

または、number_text入力によって次のように呼び出される定義済み関数としても：

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

Chromeで少し遅れがわかりますが、Firefoxでこれを呼び出しても問題は解決しません。

基本的には、Firefoxでも同じ動作を強制できます。少し遊んでみたところ、Chromeがぼかしの文字間隔を更新/再計算していることがわかりました。私のプレイセッションは、Firefoxにこの値をプログラムで再計算させることができることを示しました：

1. 入力のletter-spacing属性のインラインスタイルを別の値に変更します（number_textのCSSクラスは、ドキュメントのスタイルセクションでスタイルタグ全体を書き直すなどの手間がなければプログラムで編集できないため）。
2. 入力からクラスnumber_textを削除してください。
   • 1と2は交換可能です。クラス属性を「メモリに」保存せずに、Firefoxに設定したインラインスタイルのみにフォールバックする必要があります。
3. インラインスタイルを削除して、number_text CSSクラスを再適用します。これにより、ブラウザは必要に応じて文字の間隔を再計算します。

コードでは、次の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
        }
    }

FirefoxでもChromeと同じようにちらつきが発生します。

注：タイムアウト関数は、ブラウザが更新する時間を与え、実際に必要なものを更新するためのものです。

注：関数で.blur（）を呼び出してテキストボックスにフォーカスを失うか、または省略しても、数字のエラーなしで入力フィールドに表示されます。

これがあなたの概念の理解と問題の解決に役立つことを願っています。他の一部の個人は、ちらつきの全体を回避し、FirefoxとChromeの両方で動作する優れたソリューションを提供しました！

以前に遭遇した一般的なUIの問題のようです。

私はそれがいくつかのプラットフォームでも失敗するに違いない（これがこの特定のバグの性質です）。

すべてではないが一部のプラットフォームでは、キャレットを示すためにスペース文字が使用されます。

すべてではないが一部のプラットフォームでは、この文字は間隔を空けませんが、最後ではなく次の文字をオーバーレイします。したがって、次の文字がない場合は、入力が完了するまでスペースで埋められます。

どちらの場合も、ディスプレイはこのように動作します。

これは、最良の解決策が最も単純な解決策であり、この一般的なシステムの癖に対応するケースであり、一部の人々が提案したとおりに希望どおりに動作するように強制する解決策ではありません。これはバグを引き起こす可能性が低く、すべてのプラットフォームで動作する可能性が高くなります。

解決策は、これを表示するためのエントリの最後に少しの余裕を与えることです。

「幅」を230または240に増やしてください。

さらに、非標準システム、特に代替フォントやサイズ属性を持つアクセシビリティシステムに対応するには、領域に全幅のスペースを入力し、最後に1/4幅のスペースを追加して測定し、削除することで、幅を検出します。または、ユーザーが入力するときに全幅のスペースを上書きするために単にリギングする（またはデータを入力する場合、キーボードまたは一度に1文字ずつ入力するものであると想定しないでください）。