Функция фокуса jQuery не работает в Firefox

Следующий фрагмент кода фокусирует ввод текста после нажатия на ссылку. Он отлично работает для Chrome 2.x, IE8 и Opera 9.64, но не для Firefox 3.0.9. Ввод текста быстро мигает в Firefox, а затем исчезает, в настоящее время я работаю над Windows XP SP2.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script>
$(document).ready(function()
{
    $("a").click(function() {
        var field_id = $(this).attr("href");
        $(field_id).focus();
    });
});
</script>

<a href="#text_field">Focus</a>
<input type="text" name="text_field" id="text_field" />

Кто-нибудь знает, как справиться с вышеуказанным в Firefox?


jquery jquery-1.3
person Thierry Lam    schedule 09.06.2009    source источник

Ответы (6)


arrow_upward
10
arrow_downward

Я не знаю, хочешь ли ты этого. Чтобы сфокусировать ввод, нажав на метку, вы можете сделать следующее:

<label for="text_field">Label</label>
<input type="text" name="text_field" id="text_field" />

OR

<label>Label
<input type="text" name="text_field" id="text_field" />
</label>
person Daniel Moura    schedule 09.06.2009
comment
Это намного проще, мне не нужно проходить через jQuery. - person Thierry Lam; 10.06.2009

arrow_upward
2
arrow_downward

Как намекнул Даниэль, проблема заключается в #text_field в ссылке. После установки фокуса Firefox хочет перейти к указанному месту в документе. Все, что вам нужно сделать, это вернуть false из вашего обработчика кликов.

$(field_id).focus();
return false;
person great_llama    schedule 09.06.2009

arrow_upward
1
arrow_downward

В дополнение к двум другим ответам причина, по которой ваш способ не работает, заключается в том, что значение поля href обычно полностью определяется URL-адресом (это зависит от браузера, и jQuery не абстрагирует его).

Поэтому, если у вас есть href "#text_field", вы можете обнаружить, что фактическое значение поля равно "http://localhost/#text_field", поэтому он не соответствует вашему шаблону.

Предложение Дэниела с метками и атрибутами «для» — хорошее решение, если вы хотите сосредоточиться на полях.

person Rob Beardow    schedule 09.06.2009
comment
+1 за упоминание .href, включая материал http:// - эта «функция» меня уже привлекала, следите за ней и на .src. - person gnarf; 10.06.2009

arrow_upward
1
arrow_downward

Это должно помочь:

$(function ()
{
    $("a").click(function ()
    {
        $($(this).attr("href")).focus();

        return false; // remember to stop links default action
    });
});

Протестировано в последних версиях Chrome, IE и FireFox.

person cllpse    schedule 09.06.2009

arrow_upward
0
arrow_downward

Я думаю, что эта ошибка в FF возникает из-за того, что после того, как вы нажмете на ссылку, она запустит обратный вызов щелчка, а после этого откроет текстовое поле страницы #. Можешь попробовать:

$(document).ready(function()
{
    $("div").click(function() {
        var field_id = $(this).attr("forInput");
        $(field_id).focus();
    });
});
</script>

<div forInput="#text_field">Focus</div>
<input type="text" name="text_field" id="text_field" />

Таким образом, нет ссылки и не откроется другая страница.

person Daniel Moura    schedule 09.06.2009
comment
Хорошо, я совершенно забыл о факторе ссылки, я столкнулся с похожей ситуацией сегодня утром. - person Thierry Lam; 10.06.2009

arrow_upward
0
arrow_downward

Вы также можете быть более явным и вызвать preventDefault в аргументе события.

$(document).ready(function()
{
    $("a").click(function(event) {
        var field_id = $(this).attr("href");
        $(field_id).focus()
        event.preventDefault();
    });

});
person BaroqueBobcat    schedule 09.06.2009