フォーカスのある要素でタブキーを押したときと同じ効果をトリガーしたい。これを行う方法はありますか?フォーカスを次の要素にジャンプさせようとしています。
ありがとう!
(jQueryはオプションです)
フォーカスのある要素でタブキーを押したときと同じ効果をトリガーしたい。これを行う方法はありますか?フォーカスを次の要素にジャンプさせようとしています。
ありがとう!
(jQueryはオプションです)
このようなもの(jQueryを使用):
<!DOCTYPE html>
<html lang="en">
<head>
<title>LOL Focus!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
</head>
<form>
<input class="focusable" type="text" value="lol"/>
<input class="focusable" type="text" value="lol" />
<input class="focusable" type="text" value="lol" />
<input class="focusable" type="text" value="lol" />
<input class="focusable" type="text" value="lol" />
<input class="focusable" type="text" value="lol" />
</form>
<input type="button" id="trigger_button" value="lol" />
<script type="text/javascript">
$(function() {
var focusable = $('.focusable'),
last_element_index = focusable.length - 1,
current_index;
focusable.each(function(i) {
$(this).click(function() {
current_index = i;
})
});
$('#trigger_button').click(function() {
current_index = (should_reset_current_index()) ? 0 : current_index + 1;
focusable[current_index].focus();
});
function should_reset_current_index() {
return (typeof(current_index) === 'undefined') || (current_index == last_element_index)
}
});
</script>
</html>
しばらく前にタブ機能をエミュレートする必要があり、今回はjqueryを使用するライブラリとしてリリースしました。
EmulateTab : ページ上の要素間のタブ移動をエミュレートする jQuery プラグイン。
デモでその仕組みを確認できます。
if (myTextHasBeenFilledWithText) {
// Tab to the next input after #my-text-input
$("#my-text-input").emulateTab();
}