Так что мне нравится ответ Темани Афифа об использовании обтравочной маски. Думаю, это здорово. Я хотел предложить другое решение (немного менее элегантное). Я также использовал Firefox для проверки этой проблемы, и нажатие за пределами текстовой области (потеря фокуса) не приводит к повторному появлению 1-го ди git или возвращению строки go в нормальное состояние при вводе текста.
Я полагаю, что проблема заключается в заданном вами атрибуте интервала букв 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 пересчитать это значение программно:
- Измените встроенный стиль атрибута межбуквенного интервала ввода на другое значение (так как мы не можем редактировать CSS класс number_text программно без особых усилий, таких как перезапись всего тега стиля в разделе стиля документа).
- Удалить класс number_text из входных данных.
- 1 и 2 являются взаимозаменяемыми, вам нужно Firefox, чтобы использовать только заданный вами встроенный стиль без сохранения атрибутов класса «в памяти».
- Удалите встроенный стиль и повторно примените класс number_text CSS. Это заставит браузер пересчитать разделение букв так, как нам нужно.
В коде это будет выглядеть следующим образом: JavaScript function:
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
}
}
It будет иметь такое же мерцание в Firefox, как и в Chrome, и все будет хорошо.
Примечание : функции тайм-аута дают браузеру время для обновления sh, и на самом деле обновить то, что нам нужно.
Примечание : Вы можете выбрать .blur () в функции, чтобы текстовое поле потеряло фокус, или опустить это, и они все еще будут в поле ввода без ошибок с цифрами.
Надеюсь, это поможет вашему концептуальному пониманию, а также решению проблемы. Некоторые другие люди дали хорошие решения, которые избегают всего мерцания, и работают как в Firefox, так и в Chrome!