Metin kutusuna son numara yazıldığında ilk sayı girilir

Son sayıyı yazdığımda , ilk sayı içeri girer text-box(kaybolur), fazladan bir boşluk ekler.

Dışına tıkladıktan sonra text-boxson karakteri yazarken ihtiyacım olan iyi görünüyor.

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

Bu sorunlardan kurtulmama yardım et. Teşekkürler

Başka bir numara için boşluk ekleyin ve girişi 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">

Veya arka plan boyutunu azaltarak klips yolu olmadan:

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

Bu kodu kullanın. güzel çalışması

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>

Bu betiği giriş alanının altına eklemeyi deneyin:

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

Bu, giriş imlecinizi 6. karakter girildikten sonra girişin başına zorlar. Ayrıca alana bir bulanıklaştırma () ekledim, böylece başlangıçtaki imleç atlama dışarı çıkmaz.

Zaman aşımı da gereklidir. Bu olmadan girilen karakter başlangıçta eklenir. Zaman aşımı hakkında daha fazla bilgi: setTimeout, javascript ile zaman uyumsuz işlevler yapmak için iyi bir çözüm mü?

Giriş kutusunun js onkeyup üzerinde bir blur () olayı ekleyerek başa çıkabilirsiniz:

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

Lütfen aşağıdaki css'i değiştirin (işe yarayacaktır)

padding-left: 14px;

için

padding-left: 5px;

Bu yüzden Temani Afif'in kırpma maskesini kullanma hakkındaki cevabını seviyorum. Harika olduğunu düşün. Başka bir çözüm önermek istedim (biraz daha az zarif). Bu sorunu test etmek için Firefox'u kullandım ve metin alanının dışına tıklamak (odak kaybı) 1. basamak tekrar görünmez veya oradaki metin girişinde dize normale döner.

Sorunun ayarladığınız harf aralığı css özniteliği letter-spacing: 31px;olduğuna inanıyorum : ve bunun çoğu tarayıcının sahip olduğu "yanıp sönen" caret için geçerli olacağına inanıyorum. Chrome kullanıldığında, odağı kaybettiğinde bunu kaldırırken, Firefox odağı kaybettikten sonra bile bunu koruyor.

İlk çözüm, girişin odağı kaybetmesi için blur () işlevini manuel olarak çağırmaktı. Chrome'da çalışır (Kendi Kendini Yürüten Anonim İşlev kullanarak):

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

hatta number_text girdisinin şu şekilde çağırdığı bir Tanımlı İşlev olarak:

<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'da küçük bir gecikme göreceksiniz, ancak Firefox'ta bunu çağırmak sorunu çözmeyecek.

Aynı davranışı Firefox'ta da zorlayabiliriz. Biraz oynadıktan sonra, Chrome'un harf aralığını bir bulanıklıkta yenilediğini / yeniden hesapladığını düşündüm. Oyun oturumum, Firefox'u bu değeri programlı olarak yeniden hesaplamaya zorlayabileceğinizi gösterdi:

1. Girişin harf aralığı özelliğinin satır içi stilini farklı bir değere değiştirin (bir belgenin stil bölümüne tüm stil etiketini yeniden yazmak gibi, çok çaba harcamadan number_text CSS sınıfını programsal olarak düzenleyemediğimiz için).
2. Class number_text öğesini girişten kaldırın.
   • 1 ve 2 değiştirilebilir, sınıf özniteliklerini 'bellekte' kaydetmeden yalnızca ayarladığınız satır içi stile geri dönmek için Firefox'a ihtiyacınız vardır.
3. Satır içi stili kaldırın ve number_text CSS sınıfını yeniden uygulayın. Bu, tarayıcıyı, gerektiğinde harf ayrımını yeniden hesaplamaya zorlar.

Kodda, aşağıdaki JavaScript işlevi gibi görünecektir:

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'ta Chrome ile aynı titreşime sahip olacak ve hepsi iyi olacak.

Not : Zaman aşımı işlevleri tarayıcıya yenilenmesi için zaman tanımak ve gerçekten ihtiyacımız olanı güncellemektir.

Not : Metin kutusunun odağı kaybetmesini sağlamak için işlevde .blur () öğesini çağırmayı seçebilir veya bunu atlayabilirsiniz ve bunlar basamaklarda hata olmadan yine de giriş alanında olacaktır.

Umarım bu, kavramsal anlayışın yanı sıra sorunu çözmenize yardımcı olur. Diğer bazı bireyler, titreme olayından kaçınan ve hem Firefox hem de Chrome'da çalışan iyi çözümler verdi!

Daha önce karşılaştığım yaygın bir kullanıcı arayüzü sorunu gibi görünüyor.

Bahse girerim sadece bazı platformlarda da başarısız olur (bu, bu hatanın doğasıdır.)

Hepsi olmasa da bazı platformlarda, düzeltme işaretini belirtmek için bir boşluk karakteri kullanılır.

Tümü değil, bazı platformlarda, bu karakter boşluk bırakmaz, ancak bir sonraki, son değil, üst üste binen karakterdir. Dolayısıyla, bir sonraki karakter yoksa giriş yapılana kadar boşlukla doldurulur.

Her iki durumda da ekran bu şekilde hareket edecektir.

Bu, en iyi çözümün, bazı insanların önerdiği gibi olmasını istediğiniz şekilde davranmaya zorlayan çözümü değil, bu ortak sistem tuhaflığını barındıran en basit çözüm olduğu bir durumdur. Bu, hatalara neden olma olasılığı daha düşüktür ve tüm platformlarda çalışma olasılığı daha yüksektir.

Çözüm, bunu görüntülemek için girişin sonunda biraz boş yer vermek.

" Genişliği " 230 veya 240'a artırın ve iyi olmalısınız.

Ayrıca, standart olmayan sistemleri, özellikle alternatif yazı tiplerine veya boyut özelliklerine sahip erişilebilirlik sistemlerini, alandaki tam genişlik boşluklarını girerek, sonunda çeyrek genişlik alanı ekleyerek, ölçerek ve sonra silerek veya kullanıcı yazarken (veya başka bir şekilde veri girerken, bunun bir klavye veya bir kerede bir karakter giren bir şey olduğunu varsaymayın).