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

Question

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

Answer 1

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

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

ИЛИ

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

Answer 2

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

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

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

Answer 3

Я думаю, что эта ошибка в 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" /> 

Этот способ не имеет ссылки и не откроет другую страницу.

Answer 4

Это должно сделать трюк:

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

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

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

Answer 5

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

$(field_id).focus(); 
return false; 

Answer 6

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

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

}); 

Answer 7

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