Первый номер идет внутрь, когда наберите последний номер в текстовом поле

Когда я набираю последнее число , первое число входит внутрь 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-го символа. Я также добавил размытие () в поле, чтобы переход курсора к началу не выпирал.

Таймаут также необходим. Без этого введенный символ будет вставлен в начале. Подробнее о тайм-ауте: Является ли 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 для проверки этой проблемы, и нажатие за пределами текстовой области (потеря фокуса) не приводит к повторному появлению 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. Измените встроенный стиль атрибута межбуквенного интервала ввода на другое значение (так как мы не можем программно редактировать CSS-класс number_text без особых усилий, таких как перезапись всего тега стиля в разделе стиля документа).
2. Удалить класс number_text из ввода.
   • 1 и 2 являются взаимозаменяемыми, вам нужно, чтобы Firefox использовал только встроенный стиль, который вы установили, без сохранения атрибутов класса «в памяти».
3. Удалите встроенный стиль и повторно примените CSS-класс number_text. Это заставит браузер пересчитать разделение букв так, как нам нужно.

В коде это будет выглядеть как следующая функция 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, и все будет хорошо.

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