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

Question

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

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

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

Есть идеи, как заставить это работать и в Chrome?

Answer 1

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

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

Answer 2

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

Answer 3

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

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

Событие mouseup срабатывает после onfocus.

Answer 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, в результате чего ничего не выбирается.

Answer 5

Основываясь на ответе Джейсона, вот функция, которая заменяет функцию «выбора» входных узлов 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 () и которая вызывает brokenSelectFunction () после задержки. Теперь просто вызовите select () как обычно, поскольку встроенная функция select была заменена фиксированной функцией с предложением Jason's delay.

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

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

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

Answer 6

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

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

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

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

Answer 7

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

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

Answer 8

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

Answer 9

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

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

Answer 10

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

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