Как сфокусироваться в конце текста в поле ввода поиска Google?

#javascript #focus

#javascript #фокус

Вопрос:

Как сфокусироваться в конце текста в поле ввода с помощью Javascript.

Я хочу навести курсор мыши на поле ввода, чтобы сфокусироваться на нем, а проклятие находится в конце текста.

Я просто использую событие как следующее, проклятие находится в первом.

     document.addEventListener('mouseover', function (e) {
        if (e.target.localName ==='input'){
            e.target.focus();
        }
    });

    document.addEventListener('mouseout', function (e) {
            e.target.blur();
    });

Ответ №1:

Более безопасное решение, при котором вы не изменяете содержимое / значение поля ввода, — это инициирование выбора значения.

 document.addEventListener('mouseover', function (e) {
  let elm = e.target;
  if (elm.localName ==='input'){
    elm.focus();
    elm.selectionStart = elm.value.length;
    elm.selectionEnd = elm.value.length;
  }
});

document.addEventListener('mouseout', function (e) {
  e.target.blur();
});

 <input value="hello"/>

Развернуть фрагмент

1. Спасибо, это лучше, чем первый, который изменяет значение и влияет на функцию, которая отображает панель значков при фокусировке поля ввода.

2. @lyscop .. рад узнать. Пожалуйста, отметьте ответ, который подходит вам, как решение, чтобы этот вопрос был закрыт.

3. К сожалению, отображается ошибка, e.target.selectionStart = e.target.value.length; не удается прочитать свойство ‘length’ неопределенного

4. это не e так . это должно быть elm .. проверьте код должным образом.

5. @lyscop .. можете ли вы опубликовать код, который вы используете?

Ответ №2:

При фокусировке ввода вы можете стереть вводимое значение и снова установить то же значение.

  document.addEventListener('mouseover', function (e) {
  if (e.target.localName ==='input'){
    e.target.focus();
    var val = e.target.value; //store the value of the element
    e.target.value = '';      //clear the value of the element
    e.target.value = val;     //set that value back. 
  }
});

document.addEventListener('mouseout', function (e) {
  e.target.blur();
});

 <input id="search" type="text" size="30" name="search"/>

Развернуть фрагмент

1. это работает для вас, @lyscop? если да, не могли бы вы проголосовать?

2. На самом деле не уверен, что изменение значения здесь является хорошей идеей, поскольку могут быть другие функции, которые могут повлиять на изменение значения этого поля ввода.

3. Он немедленно восстанавливает значение, поэтому проблем не будет.

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