Как перефокусировать к текстовому полю, когда фокус потерян на HTML-форме?
На HTML-форме существует только одно текстовое поле. Пользователи вводят некоторый текст, нажимают Enter, отправляют форму, и форма перезагружается. Основное использование является чтением штрихкода. Я использую следующий код для установки фокуса на текстовое поле:
<script language="javascript">
<!--
document.getElementById("#{id}").focus()
//-->
</script>
Это работает большую часть времени (если никто не касается экрана/мыши/клавиатуры).
Однако, когда пользовательский щелчок где-нибудь вне поля в окне браузера (белый вакуум), курсора не стало. Один единственная полевая HTML-форма, как я могу препятствовать тому, чтобы курсор терялся? Или, как перефокусировать курсор в поле после того, как курсор потерян? Спасибо!
3 ответа
Ответ Дарина правильный, но не работает в Firefox. Если вы хотите вернуть фокус и в Firefox, вы должны отложить это до окончания события:
<input onblur="var that= this; setTimeout(function() { that.focus(); }, 0);">
Или, лучше, назначенного из JavaScript:
<script type="text/javascript">
var element= document.getElementById('foo');
element.focus();
element.onblur= function() {
setTimeout(function() {
element.focus();
}, 0);
};
</script>
Но, я настоятельно рекомендую вам не делать этого . Щелчок за пределами текстового поля для снятия фокуса с этого текстового поля - это совершенно нормальное поведение браузера, которое может иметь законное использование (например, для установки точки поиска для ctrl-F или запуска выделения с помощью перетаскивания и т. Д.). Маловероятно, что у вас будет веская причина вмешиваться в это ожидаемое поведение.
<input type="text" name="barcode" onblur="this.focus();" />
Вы можете перехватить событие blur и снова перефокусировать поле. Для этого очень мало вариантов использования, но похоже, что ваш может быть одним из них. Обратите внимание, что вам, вероятно, придется запланировать перефокусировку через setTimeout или подобное, вы не сможете сделать это в самом обработчике blur .
Сделать это, не затрагивая разметку, проще всего, если вы используете такую библиотеку, как Prototype , jQuery , Closure и т. Д., Но вы можете делать это без них (конечно), вам просто нужно самостоятельно справиться с различиями в браузере. Например, используя Prototype:
document.observe("dom:loaded", function() {
var elm = $('thingy');
elm.focus();
elm.observe('blur', function() {
refocus.defer(elm);
});
function refocus(elm) {
elm.focus();
}
});
Если вы не возражаете против изменения разметки, вы можете использовать атрибут onblur . Например, это работает, по крайней мере, в IE, Firefox и Chrome (возможно, в других):
HTML:
<input type='text' id='thingy' onblur="refocus(this);">
Скрипт:
function refocus(elm) {
setTimeout(go, 0);
function go() {
elm.focus();
}
}