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

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

5 голосов
/ 09 апреля 2010

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

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

Это работает большую часть времени (если никто не касается экрана / мыши / клавиатуры).пользователь щелкает где-то за пределами поля в окне браузера (белое пустое пространство), курсор исчезает.Одна форма HTML в одном поле, как я могу предотвратить потерю курсора?Или как перефокусировать курсор внутри поля после того, как курсор потерян?ТНХ!

Ответы [ 3 ]

8 голосов
/ 09 апреля 2010

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

2 голосов
/ 09 апреля 2010 
<input type="text" name="barcode" onblur="this.focus();" />
1 голос
/ 09 апреля 2010

Вы можете перехватить событие blur и снова перефокусировать поле. Существует очень мало вариантов использования для этого, но, похоже, ваш может быть одним из них. Обратите внимание, что вам, вероятно, придется планировать перефокусировку с помощью setTimeout или подобного, вы не сможете сделать это в самом обработчике blur.

При этом, не затрагивая разметку, это проще всего, если вы используете библиотеку, такую ​​как Прототип , jQuery , Закрытие и т. Д., Но вы можете делать это без них (конечно), вы просто должны справиться с различиями браузера самостоятельно. Например, используя 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();
    }
}
...