Проблема с обработкой формы Chrome: input onfocus = "this.select()"

Я использую следующий код HTML для автоматического выбора некоторого текста в поле формы, когда пользователь нажимает на это поле:

<input onfocus="this.select()" type="text" value="Search">

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

Любые идеи о том, как заставить эту работу работать в Chrome?

Ответ 1

Вместо привязки к событию onfocus вы должны привязать это действие к событию onclick, и оно будет работать так, как вы хотели.

<input onclick="this.select()" id="txt1" name="txt1" type="text" value="Search">

Ответ 2

Если вы действительно настаиваете на том, чтобы придерживаться onfocus, вам также нужно добавить onmouseup="return false".

Ответ 3

Это работает лучше всего для меня...

<input type="text"  onfocus="this.searchfocus = true;" onmouseup="if(this.searchfocus) {this.select(); this.searchfocus = false;}" />

Событие mouseup срабатывает после фокуса.

Ответ 4

Это решение, работающее в Firefox, Chrome и IE, с фокусом клавиатуры и фокусом мыши. Он также обрабатывает правильные щелчки по фокусу (он перемещает каретку и не снимает текст):

<input
onmousedown="this.clicked = 1;"
onfocus="if (!this.clicked) this.select(); else this.clicked = 2;"
onclick="if (this.clicked == 2) this.select(); this.clicked = 0;"
>

С фокусом клавиатуры, только onfocus триггеры, которые выбирают текст, потому что this.clicked не установлен. С фокусом мыши, onmousedown триггерами, затем onfocus, а затем onclick, который выбирает текст в onclick, но не в onfocus (для этого требуется Chrome).

Щелчки мыши, когда поле уже сфокусировано, не запускают onfocus, что приводит к тому, что ничего не происходит.

Ответ 5

Как мне это удалось, создав функцию-оболочку, которая использует setTimeout() для задержки фактического вызова на select(). Затем я просто вызываю эту функцию в событии фокуса текстового поля. Использование setTimeout отменяет выполнение до тех пор, пока стек вызовов не будет пуст, что будет, когда браузер завершит обработку всех событий, которые произошли при щелчке (mousedown, mouseup, click, focus и т.д.). Это немного взломать, но он работает.

function selectTextboxContent(textbox)
{
    setTimeout(function() { textbox.select(); }, 10);
}

Затем вы можете сделать что-то подобное, чтобы сделать выделение в фокусе:

<input onfocus="selectTextboxContent(this);" type="text" value="Search">

Ответ 6

Основываясь на ответе Джейсона, вот функция, которая заменяет функцию "select" входных узлов DOM с обновленной версией, которая имеет тайм-аут, встроенный в:

if (/chrome/i.test(navigator.userAgent)) {
    HTMLInputElement.prototype.brokenSelectFunction = 
        HTMLInputElement.prototype.select;

    HTMLInputElement.prototype.select = function() {
        setTimeout(function(closureThis) { return function() {
            closureThis.brokenSelectFunction();
        }; }(this), 10);
    };
}

В принципе, (только в Chrome) мы просто переименовали встроенную, но сломанную функцию select() в brokenSelectFunction(), а затем добавили новую функцию ко всем входам, называемым select(), которые вызывают breakSelectFunction() после задержки. Теперь просто вызовите select() как обычно, поскольку встроенная функция выбора была заменена фиксированной функцией с предложением Jason delay.

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

textbox.select(); // now runs select with setTimeout built-in (in Chrome only)

Изменить: вы можете изменить совпадение пользовательского агента с "хром" на "webkit", так как эта проблема возникает во всех браузерах веб-браузера, включая Safari, и это исправление будет работать для любых из них.

Ответ 7

Просто используйте <input onmouseup=select()>. Это работает во всех браузерах.

Ответ 8

Этот вопрос был опубликован пять лет назад, но с HTML5 вы можете сделать эту функцию с атрибутом placeholder.

<input type="text" name="fname" placeholder="First name">

Ответ 9

onfocus="setTimeout(function(){select(this)})"

или onfocus="setTimeout(function(){select(this)},118)" для Firefox.

Ответ 10

Спасибо ilawton. Это работает для меня

    <input type="text"  onfocus="this.searchfocus = true;" onmouseup="if(this.searchfocus) {this.select(); this.searchfocus = false;}" />