Nomor pertama masuk ke dalam ketika mengetikkan angka terakhir di kotak teks

Ketika saya mengetik angka terakhir , angka pertama masuk ke dalam text-box(menghilang), itu menambah satu ruang ekstra.

Setelah saya klik di luar text-boxitu terlihat bagus yang saya butuhkan saat mengetik karakter terakhir.

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

Bantu saya untuk keluar dari masalah ini. Terima kasih

Tambahkan ruang untuk nomor lain dan klip input menggunakan 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">

Atau tanpa clip-path dengan mengurangi ukuran latar belakang:

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

Gunakan kode ini. itu bekerja dengan baik

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>

Coba tambahkan skrip ini di bawah kolom input:

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

Yang ini memaksa kursor input Anda ke awal input setelah karakter keenam dimasukkan. Saya juga menambahkan blur () ke bidang sehingga kursor-lompat ke awal tidak akan menonjol.

Waktu tunggu juga diperlukan. Tanpanya karakter yang dimasukkan akan dimasukkan di awal. Lebih lanjut tentang batas waktu: Apakah setTimeout solusi yang baik untuk melakukan fungsi async dengan javascript?

Anda dapat mengatasinya dengan menambahkan blur () event js onkeyup dari kotak input:

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

Silakan ubah css di bawah ini (ini akan bekerja)

padding-left: 14px;

untuk

padding-left: 5px;

Jadi saya suka jawaban Temani Afif tentang menggunakan topeng kliping. Berpikir itu hebat. Saya ingin mengusulkan solusi lain (sedikit kurang elegan). Saya menggunakan Firefox untuk juga menguji masalah ini, dan mengklik di luar area teks (kehilangan fokus) tidak membuat digit pertama muncul kembali atau string kembali normal di input teks di sana.

Saya percaya masalahnya adalah atribut spasi huruf css yang Anda tetapkan:, letter-spacing: 31px;dan fakta bahwa saya percaya ini akan berlaku untuk tanda "berkedip" yang dimiliki sebagian besar browser. Menggunakan Chrome, tampaknya menghapus ini ketika kehilangan fokus, sementara Firefox mempertahankan ini bahkan setelah kehilangan fokus.

Solusi pertama adalah menggunakan fungsi panggilan blur () secara manual untuk membuat input kehilangan fokus. Ini berfungsi di Chrome (menggunakan Fungsi Anonim yang Melakukan sendiri):

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

atau bahkan sebagai Fungsi yang Ditentukan yang dipanggil oleh input number_text seperti:

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

Anda akan melihat sedikit keterlambatan di Chrome, tetapi memanggil ini di Firefox tidak akan menyelesaikan masalah.

Kami pada dasarnya dapat memaksa perilaku yang sama ini di Firefox. Setelah beberapa bermain-main, saya pikir Chrome sedang menyegarkan / menghitung ulang jarak huruf pada blur. Sesi permainan saya menunjukkan bahwa Anda dapat memaksa Firefox untuk menghitung ulang nilai ini secara terprogram:

1. Ubah style inline dari atribut spasi huruf input ke nilai yang berbeda (karena kita tidak dapat mengedit kelas CSS number_text secara terprogram tanpa banyak usaha, seperti menulis ulang seluruh style tag di bagian style dari dokumen).
2. Hapus Class number_text dari input.
   • 1 dan 2 dapat dipertukarkan, Anda perlu Firefox untuk mundur ke hanya gaya inline yang Anda atur, tanpa atribut kelas disimpan 'dalam memori'.
3. Hapus inline-style dan terapkan kembali kelas CSS number_text. Ini akan memaksa browser untuk menghitung ulang surat-pemisahan seperti yang kita inginkan.

Dalam kode, ini akan terlihat seperti fungsi JavaScript berikut:

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

Ini akan memiliki kedipan yang sama di Firefox dengan Chrome, dan semuanya akan baik-baik saja.

Catatan : Fungsi batas waktu adalah memberi waktu browser untuk menyegarkan, dan benar-benar memperbarui apa yang kita butuhkan.

Catatan : Anda dapat memilih untuk memanggil .blur () dalam fungsi untuk membuat kotak teks kehilangan fokus, atau menghilangkannya dan mereka akan tetap berada di bidang input tanpa kesalahan dengan digit.

Semoga ini bisa membantu pemahaman konseptual Anda, serta menyelesaikan masalah. Beberapa orang lain memberikan solusi bagus yang menghindari keseluruhan flicker, dan bekerja di Firefox dan Chrome!

Sepertinya masalah UI umum yang pernah saya temui sebelumnya.

Saya yakin itu hanya gagal pada beberapa platform juga (ini adalah sifat bug khusus ini.)

Pada beberapa, tetapi tidak semua, platform, karakter spasi digunakan untuk menunjukkan tanda sisipan.

Pada beberapa, tetapi tidak semua, platform, karakter ini non-spasi, tetapi overlay, pada karakter berikutnya, bukan yang terakhir. Karenanya jika tidak ada karakter berikutnya akan diisi dengan spasi sampai input selesai.

Dalam kedua kasus ini tampilan akan bertindak dengan cara ini.

Ini adalah kasus di mana solusi terbaik adalah solusi paling sederhana, mengakomodasi untuk kekhasan sistem umum ini, bukan solusi yang memaksanya berperilaku seperti yang Anda inginkan seperti yang disarankan beberapa orang. Ini cenderung menyebabkan bug, dan lebih mungkin bekerja di semua platform.

Solusinya adalah berikan sedikit ruang kosong di akhir entri untuk memajang ini.

Tingkatkan " lebar " menjadi 230 atau 240 dan Anda harus baik.

Lebih lanjut, Anda bahkan dapat mengakomodasi sistem non-standar dengan lebih baik, terutama sistem aksesibilitas dengan font alternatif atau atribut ukuran, dengan hanya mendeteksi lebar dengan memasukkan ruang lebar penuh di area tersebut, menambahkan ruang lebar seperempat di bagian akhir, mengukurnya, lalu menghapusnya. mereka, atau hanya mencurangi untuk menimpa ruang lebar penuh saat pengguna mengetik (atau memasukkan data, jangan menganggap itu keyboard atau bahkan sesuatu yang memasukkan satu karakter pada satu waktu.)