Pierwszy numer wchodzi do środka, gdy wpisz ostatni numer w polu tekstowym

Kiedy wpisuję ostatnią cyfrę , pierwsza cyfra wchodzi do text-box(znika), dodaje jedną dodatkową spację.

Po kliknięciu na zewnątrz text-boxwygląda dobrze, czego potrzebuję podczas pisania ostatniego znaku.

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

Pomóż mi wydostać się z tych problemów. Dzięki

Dodaj miejsce na kolejny numer i przytnij dane wejściowe za pomocą 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">

Lub bez ścieżki przycinającej poprzez zmniejszenie rozmiaru tła:

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

Użyj tego kodu. ładnie działa

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>

Spróbuj dodać ten skrypt poniżej pola wejściowego:

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

To zmusza kursor wejściowy do początku wprowadzania po wprowadzeniu 6. znaku. Dodałem również rozmycie () do pola, aby przeskakiwanie kursora na początek nie wystawało.

Limit czasu jest również potrzebny. Bez tego wprowadzony znak zostanie wstawiony na początku. Więcej informacji na temat limitu czasu: Czy setTimeout jest dobrym rozwiązaniem do wykonywania funkcji asynchronicznych za pomocą javascript?

Możesz sobie z tym poradzić, dodając zdarzenie blur () z js onkeyup pola wprowadzania:

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

Zmień css poniżej (to zadziała)

padding-left: 14px;

do

padding-left: 5px;

Podoba mi się więc odpowiedź Temani Afifa na temat używania maski przycinającej. Pomyśl, że to świetnie. Chciałem zaproponować inne rozwiązanie (nieco mniej eleganckie). Użyłem również Firefoksa, aby przetestować ten problem, a kliknięcie poza obszarem tekstowym (utrata fokusu) nie powoduje ponownego pojawienia się pierwszej cyfry lub powrotu łańcucha do normalnego poziomu podczas wprowadzania tekstu.

Wydaje mi się, że problemem jest ustawiony przez Ciebie atrybut css odstępów między literami: letter-spacing: 31px;i fakt, że uważam, że dotyczyłoby to „migającego” karetki, którą ma większość przeglądarek. W przypadku Chrome wydaje się to usuwać, gdy traci ostrość, a Firefox zachowuje to nawet po utracie ostrości.

Pierwszym rozwiązaniem było ręczne wywołanie funkcji blur (), aby utraciła ostrość na wejściu. Działa to w Chrome (przy użyciu samodzielnie wykonującej się funkcji anonimowej):

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

lub nawet jako funkcję zdefiniowaną wywoływaną przez wejście numer_tekst w taki sposób:

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

Zauważysz niewielkie opóźnienie w przeglądarce Chrome, ale wywołanie tego w przeglądarce Firefox nie rozwiąże problemu.

Możemy zasadniczo wymusić to samo zachowanie w przeglądarce Firefox. Po krótkiej zabawie doszedłem do wniosku, że Chrome odświeża / przelicza odstępy między literami na rozmyciu. Moja sesja odtwarzania pokazała, że ​​możesz zmusić Firefoksa do ponownego obliczenia tej wartości programowo:

1. Zmień styl wstawiania atrybutu odstępu między literami na inną wartość (ponieważ nie możemy programowo edytować klasy CSS tekst_liczb bez większego wysiłku, na przykład przepisując cały znacznik stylu w sekcji stylu dokumentu).
2. Usuń tekst tekstowy numer z klasy.
   • 1 i 2 są wymienne, potrzebujesz Firefoksa, aby powrócić tylko do ustawionego stylu wbudowanego, bez zapisywania atrybutów klasy „w pamięci”.
3. Usuń styl wbudowany i ponownie zastosuj klasę CSS typu number_text. Zmusi to przeglądarkę do ponownego obliczenia separacji liter według potrzeb.

W kodzie wygląda to następująco: funkcja 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
        }
    }

Będzie miał takie samo migotanie w przeglądarce Firefox jak w przypadku Chrome i wszystko będzie dobrze.

Uwaga : Funkcje limitu czasu mają dać przeglądarce czas na odświeżenie i faktycznie zaktualizować to, czego potrzebujemy.

Uwaga : Możesz wybrać wywołanie funkcji .blur () w funkcji, aby pole tekstowe straciło fokus, lub pominąć to i nadal będą znajdować się w polu wprowadzania bez błędu z cyframi.

Mam nadzieję, że pomoże to w zrozumieniu pojęć, a także w rozwiązaniu problemu. Niektóre inne osoby dały dobre rozwiązania, które unikają migotania i działają zarówno w przeglądarce Firefox, jak i Chrome!

Wygląda jak typowy problem z interfejsem użytkownika, z którym się wcześniej spotkałem.

Założę się, że zawiesza się tylko na niektórych platformach (taka jest natura tego konkretnego błędu).

Na niektórych, ale nie wszystkich platformach, znak odstępu służy do wskazania kursora.

Na niektórych, ale nie na wszystkich platformach, postać ta nie ma odstępów, ale nakłada się na następną, nie ostatnią postać. Dlatego jeśli nie będzie następnego znaku, miejsce zostanie wypełnione do momentu wprowadzenia danych.

W obu tych przypadkach wyświetlacz będzie działał w ten sposób.

Jest to przypadek, w którym najlepszym rozwiązaniem jest najprostsze rozwiązanie, dostosowane do tego typowego dziwactwa systemowego, a nie rozwiązanie, które zmusza go do zachowania się tak, jak chcesz, jak sugerują niektórzy ludzie. Jest mniej prawdopodobne, że wprowadzi błędy, a bardziej prawdopodobne, że zadziała na wszystkich platformach.

Rozwiązaniem jest trochę wolnego miejsca na końcu wpisu na wyświetlenie tego.

Zwiększ „ szerokość ” do 230 lub 240 i powinieneś być dobry.

Ponadto można jeszcze lepiej dostosować niestandardowe systemy, zwłaszcza systemy ułatwień dostępu z alternatywnymi czcionkami lub atrybutami rozmiaru, po prostu wykrywając szerokość, wprowadzając spacje o pełnej szerokości w obszarze, dodając na końcu przestrzeń o szerokości jednej czwartej, mierząc je, a następnie usuwając lub po prostu zmusza go do zastąpienia spacji o pełnej szerokości, gdy użytkownik pisze (lub w inny sposób wprowadza dane, nie zakładaj, że jest to klawiatura lub nawet coś, co wprowadza jeden znak na raz).