За последние 24 часа нас посетили 20938 программистов и 1131 робот. Сейчас ищут 347 программистов ...

Проблема с вводом в поле input с кнопки.

Тема в разделе "JavaScript и AJAX", создана пользователем Artur_hopf, 23 янв 2019.

  1. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    Добрый день. Постараюсь объяснить суть проблемы.
    Есть поле input и есть допустим одна кнопка:
    HTML:
    1.  
    2. <input id="textareaKeyBig">
    3. <button  class="jsButtonKeyBig">1</button>
    4.  
    У поля input заданна ширина. Допустим нажимаю на кнопку пока это поле не заполнится:
    Код (Javascript):
    1. var textareaKeyBig = document.getElementById('textareaKeyBig'),
    2.      jsButtonKeyBig = document.getElementsByClassName('jsButtonKeyBig');
    3. [].forEach.call(jsButtonKeyBig, function(item) {
    4.     item.addEventListener('click', function() {
    5.          textareaKeyBig.focus();
    6.          textareaKeyBig.value += this.innerHTML;
    7.     });
    8. });
    После заполнения продолжаю нажимать на кнопку и происходит вот что: Нажал на кнопку, начинает отображаться самое начало поля input, отжал кнопку показывается последний символ. То есть если нажимать быстро, текст как бы моргает.
    Как поправить код чтобы этого не происходило, я так понимаю дело в textareaKeyBig.focus() но если его убрать то введенные значения, превышающие ширину input просто не отобразятся.
     
  2. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Не совсем. Дело в определенном поведении Chrome, Opera и других webkit-браузеров, когда при потере фокуса, строка смещается к первому введенному символу.
    Единственный вариант, который я бы мог предложить - это направление текста ввода справа налево: dir="rtl" + костыль, исключающий, например, FireFox, с которым подобный проблем нет. Пример в песочнице
    HTML:
    1. <input id="textareaKeyBig" dir="rtl">
    Код (Javascript):
    1. var textareaKeyBig = document.getElementById('textareaKeyBig'),
    2.     jsButtonKeyBig = document.getElementsByClassName('jsButtonKeyBig');
    3. [].forEach.call(jsButtonKeyBig, function(item) {
    4.     item.addEventListener('mouseup', function() {
    5.         textareaKeyBig.focus();
    6.         textareaKeyBig.value += this.textContent;
    7.         if ('webkitLineBreak' in document.documentElement.style) {
    8.             textareaKeyBig.setSelectionRange(0, 0);
    9.         }
    10.     });
    11. });
     
    Artur_hopf нравится это.
  3. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    @Deonis то что нужно, спасибо :)
     
  4. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    @Deonis Подскажи пожалуйста еще. У меня функция была для удаления символа и вставки пробела. Работала так, нажимаешь в любом месте на input где есть введенные символы, в зависимости от кнопки или удалялся передний символ или ставился пробел.
    Так вот, после переделки с вводом работает не так как надо. Если фокус в самом конце поля input он ставить непонятный пробел а последующий символ будет напечатан без пробела. Удаление символов тоже происходит криво.
    Я так понимаю это из за того что теперь поле input заполняется символами с конца.

    Вот сама функция:
    Код (Javascript):
    1. [].forEach.call(jsButtonKeyBig2, function(item) {
    2.      item.addEventListener('click', function() {
    3.          var caretPos = textareaKeyBig.selectionStart,
    4.              caretPosEnd = textareaKeyBig.selectionEnd;
    5.          if(this.innerHTML == 'del'){
    6.               textareaKeyBig.value = textareaKeyBig.value.substr(0, caretPos - 1) + textareaKeyBig.value.substr(caretPosEnd);
    7.               caretPos += - 1;
    8.          }else if(!this.innerHTML ){
    9.               let key = ' ';
    10.               textareaKeyBig.value = textareaKeyBig.value.substr(0, caretPos) + key + textareaKeyBig.value.substr(caretPosEnd);
    11.               caretPos += key.length;
    12.           }
    13.          textareaKeyBig.focus();
    14.           textareaKeyBig.setSelectionRange(caretPos, caretPos);
    15.      });
    16. });
    Сам тыкаюсь не могу сообразить.
     
  5. Sail

    Sail Старожил

    С нами с:
    1 ноя 2016
    Сообщения:
    1.591
    Симпатии:
    360
    @Artur_hopf, ещё есть свойство text-indent.
    Можно, например, не фокусироваться на поле input и в зависимости от ширины этого поля и количества введённых символов при нажатии кнопки '1' менять свойство textareaKeyBig.style.textIndent.