Перше число вводиться всередину, коли введіть останній номер у текстове поле

Коли я набираю останнє число , перше число переходить всередину text-box(воно зникає), додаючи ще один пробіл.

Після того, як я натискаю зовні, 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">

Або без кліпу шляхом зменшення розміру фону:

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

Ви можете вирішити це, додавши події blur () js onkeyup вхідного поля:

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;

Тому мені подобається відповідь Темані Афіфа щодо використання відсічної маски. Подумайте, що це чудово. Я хотів запропонувати ще одне рішення (трохи менш елегантне). Я також використовував Firefox для тестування цієї проблеми, і натискання за межі області тексту (втрачає фокус) не призводить до повторного відображення першої цифри або після повернення рядка до нормального тексту.

Я вважаю, що проблема полягає у встановленому вами атрибуті 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" >

або навіть як визначена функція, що викликається вводом числа_тексту так:

<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. Змініть стиль вбудованого атрибута інтервалу для введення літер на інше значення (оскільки ми не можемо програмувати CSS-клас номер_тексту без особливих зусиль, наприклад, переписати весь тег стилів у розділі стилю документа).
2. Вийміть із вхідного тексту номер_тексту класу.
   • 1 і 2 взаємозамінні, вам потрібно Firefox відновлювати лише встановлений вами стиль вбудованої форми, не зберігаючи атрибути класу "в пам'яті".
3. Видаліть вбудований стиль і повторно застосуйте 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!

Це схоже на загальну проблему інтерфейсу, з якою я стикався раніше.

Надіваюсь, це також не вдається лише на деяких платформах (це характер цієї конкретної помилки.)

На деяких платформах, але не на всіх, використовується позначення інтервалу для позначення карети.

На деяких платформах, але не на всіх, цей персонаж не є проміжком, а накладається на наступному, а не останньому символі. Отже, якщо немає наступного символу, буде заповнено пробіл до введення даних.

В обох цих випадках дисплей буде діяти таким чином.

Це випадок, коли найкращим рішенням є найпростіше рішення, яке відповідає цій загальній системній вигадці, а не рішення, яке змушує його вести себе так, як ви хочете, як це запропонували деякі люди. Це менша ймовірність введення помилок і частіше працювати на всіх платформах.

Рішення полягає в тому, щоб в кінці входу дати трохи вільного місця для відображення цього.

Збільшити " ширину " до 230 або 240, і ви повинні бути хорошими.

Крім того, ви можете ще краще розмістити нестандартні системи, особливо системи доступності з альтернативними шрифтами чи атрибутами розміру, просто визначивши ширину, ввівши пробіли по всій ширині в області, додавши в кінці простір ширини, вимірявши їх, потім видаливши їх або просто сфальсифікувати його, щоб перезаписати пробіли повної ширини під час користувальницьких типів (або іншим чином вводити дані, не вважайте, що це клавіатура або навіть щось, що вводить один символ за один раз.)