.focus()

要素のfocusイベントにbindします。また、focusイベントを実行します。

このメソッドは、1つ目と2つ目は.bind('focus', handler)への、3つ目は.trigger('focus')への ショートカットです。

focusは指定要素がフォーカスを得た際に発生するイベントです。 かつては<input>のようなフォーム要素専用のイベントでしたが、最近のブラウザでは Tabキーや他の要素へのマウスクリック等でフォーカスを失ったとみなし、focusイベントが 発生するようになっています。

.focus( handler(eventObject) ) 1.0追加

戻り値:jQuery

要素のfocusイベントにbindします。また、focusイベントを実行します。

引数 説明
handler(eventObject) イベントが発生した際に、実行したい処理を関数として指定します。
$('#target').focus(function() {
  alert('focusイベントが発生しました。');
});

.focus( [eventData], handler(eventObject) ) 1.4.3追加

戻り値:jQuery

要素のfocusイベントにbindします。また、focusイベントを実行します。

引数 説明
[eventData] マップ値を指定することで、データをイベントハンドラーに渡すことが出来ます。
handler(eventObject) イベントが発生した際に、実行したい処理を関数として指定します。

.focus() 1.0追加

戻り値:jQuery

focusイベントを発生させます。

//ID:other要素をクリックすると、ID:targetのフォーカスイベントを実行します。
$('#other').click(function() {
  $('#target').focus();
});

サンプル

<!DOCTYPE html>
<html>
<head>
<style>span {display:none;}</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><input type="text" /> <span>input textがfocusを取得!</span></p>
<p><input type="password" /> <span>input passwordがfocusを取得!</span></p>
<script>
$("input").focus(function () {
     $(this).next("span").css('display','inline').fadeOut(1000);
});
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM