Добрый день. Постараюсь объяснить суть проблемы. Есть поле input и есть допустим одна кнопка: HTML: <input id="textareaKeyBig"> <button class="jsButtonKeyBig">1</button> У поля input заданна ширина. Допустим нажимаю на кнопку пока это поле не заполнится: Код (Javascript): var textareaKeyBig = document.getElementById('textareaKeyBig'), jsButtonKeyBig = document.getElementsByClassName('jsButtonKeyBig'); [].forEach.call(jsButtonKeyBig, function(item) { item.addEventListener('click', function() { textareaKeyBig.focus(); textareaKeyBig.value += this.innerHTML; }); }); После заполнения продолжаю нажимать на кнопку и происходит вот что: Нажал на кнопку, начинает отображаться самое начало поля input, отжал кнопку показывается последний символ. То есть если нажимать быстро, текст как бы моргает. Как поправить код чтобы этого не происходило, я так понимаю дело в textareaKeyBig.focus() но если его убрать то введенные значения, превышающие ширину input просто не отобразятся.
Не совсем. Дело в определенном поведении Chrome, Opera и других webkit-браузеров, когда при потере фокуса, строка смещается к первому введенному символу. Единственный вариант, который я бы мог предложить - это направление текста ввода справа налево: dir="rtl" + костыль, исключающий, например, FireFox, с которым подобный проблем нет. Пример в песочнице HTML: <input id="textareaKeyBig" dir="rtl"> Код (Javascript): var textareaKeyBig = document.getElementById('textareaKeyBig'), jsButtonKeyBig = document.getElementsByClassName('jsButtonKeyBig'); [].forEach.call(jsButtonKeyBig, function(item) { item.addEventListener('mouseup', function() { textareaKeyBig.focus(); textareaKeyBig.value += this.textContent; if ('webkitLineBreak' in document.documentElement.style) { textareaKeyBig.setSelectionRange(0, 0); } }); });
@Deonis Подскажи пожалуйста еще. У меня функция была для удаления символа и вставки пробела. Работала так, нажимаешь в любом месте на input где есть введенные символы, в зависимости от кнопки или удалялся передний символ или ставился пробел. Так вот, после переделки с вводом работает не так как надо. Если фокус в самом конце поля input он ставить непонятный пробел а последующий символ будет напечатан без пробела. Удаление символов тоже происходит криво. Я так понимаю это из за того что теперь поле input заполняется символами с конца. Вот сама функция: Код (Javascript): [].forEach.call(jsButtonKeyBig2, function(item) { item.addEventListener('click', function() { var caretPos = textareaKeyBig.selectionStart, caretPosEnd = textareaKeyBig.selectionEnd; if(this.innerHTML == 'del'){ textareaKeyBig.value = textareaKeyBig.value.substr(0, caretPos - 1) + textareaKeyBig.value.substr(caretPosEnd); caretPos += - 1; }else if(!this.innerHTML ){ let key = ' '; textareaKeyBig.value = textareaKeyBig.value.substr(0, caretPos) + key + textareaKeyBig.value.substr(caretPosEnd); caretPos += key.length; } textareaKeyBig.focus(); textareaKeyBig.setSelectionRange(caretPos, caretPos); }); }); Сам тыкаюсь не могу сообразить.
@Artur_hopf, ещё есть свойство text-indent. Можно, например, не фокусироваться на поле input и в зависимости от ширины этого поля и количества введённых символов при нажатии кнопки '1' менять свойство textareaKeyBig.style.textIndent.