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

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

1 голос
/ 10 июня 2009

Следующий фрагмент кода фокусируется на вводе текста после нажатия на ссылку. Он отлично работает для 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?

Ответы [ 7 ]

10 голосов
/ 10 июня 2009

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

<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>
2 голосов
/ 10 июня 2009

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

$(field_id).focus();
return false;
1 голос
/ 20 июля 2011 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script>
$(function() {
    $("a").click(function() {
        var field_id = $(this).attr("href");
        $("#"+ field_id).focus();
        return false;
    });
});
</script>

<a href="text_field">Focus</a>
<input type="text" name="text_field" id="text_field" />
1 голос
/ 10 июня 2009

Это должно сработать: 

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

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

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

1 голос
/ 10 июня 2009

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

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

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

0 голосов
/ 10 июня 2009

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

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

});
0 голосов
/ 10 июня 2009

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

$(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" />

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

...