Как переориентировать на текстовое поле, когда фокус теряется на HTML-форме?

Question

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

<script language="javascript">
    <!--
            document.getElementById("#{id}").focus()
    //-->
</script>

Это работает большую часть времени (если никто не касается экрана / мыши / клавиатуры).

Однако, когда пользователь щелкает где-то за пределами поля в окне браузера (белое пустое пространство), курсор исчезает. Одна форма HTML в одном поле, как я могу предотвратить потерю курсора? Или как перефокусировать курсор внутри поля после того, как курсор потерян? Спасибо!

Answer 1

Дарин ответит правильно, но в 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 или для запуска перетаскивания и т. Д.). Маловероятно, что есть веская причина возиться с этим ожидаемым поведением.

Answer 2

<input type="text" name="barcode" onblur="this.focus();" />

Answer 3

Вы можете подключить 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();
    }
}