.focusout()【《フォーカス喪失》イベントハンドラ設定・実行】
メモ
- 《フォーカス喪失》イベントハンドラの設定
.on( "focusout" [, data], handler )の省略形- 解除は、.off()【イベントハンドラ解除】
- 対応する.focusin()【《フォーカス取得》イベントハンドラ設定・実行】 と共にイベントのバブルアップあり
下記はバブルアップなし
.focus()【《フォーカス取得 (バブリングなし)》イベントハンドラ設定・実行】
.blur()【《フォーカス喪失 (バブリングなし)》イベントハンドラ設定・実行】
- 《フォーカス喪失》イベントハンドラの実行
構文
| 説明 | 構文 | 戻り値 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 《フォーカス喪失》 イベントハンドラ設定 | .focusout( handler ) 1.0 handler：イベントハンドラ
.on( "focusout", handler )の省略形 | jQuery | ||||||||||
| .focusout( [eventData ], handler ) 1.4.3 Anything eventData：イベントデータ handler：イベントハンドラ
.on( "focusout", data, handler )の省略形 | jQuery | |||||||||||
| 《フォーカス喪失》 イベントハンドラ実行 | .focusout() 1.0.trigger( "focusout" )の省略形 | jQuery |
関連
例
<style>
.classFocus, .classFocusIn { background-color:pink; }
fieldset.classFocus, fieldset.classFocusIn { background-color:lightcyan; }
label.ex1, label.ex2 { border:1px black solid; padding:1px 10px; }
.output { width:200px; height:100px; }
</style>
<fieldset id="fieldset1" class="ex1">
<legend>.focus() / .blur() 【イベントのバブルアップなし】</legend>
<p>
<input id="input1" class="ex1" value="input" tabindex="1">
<button id="button11">.focus()</button>
<button id="button12">.triggerHandler( "focus" )</button>
</p>
<p>
<select id="select1" class="ex1" size="3" tabindex="2">
<option>option1
<option>option2
<option>option3
</select>
</p>
<p><textarea id="textarea1" class="ex1" tabindex="3">textarea</textarea></p>
<p><a id="a1" class="ex1" href="#" tabindex="4">anchor</a></p>
<p>
<label id="label11" class="ex1">label tabindex 未指定</label>
<label id="label12" class="ex1" tabindex="5">label tabindex 指定</label>
</p>
<textarea id="output1" class="output">【出力】</textarea>
</fieldset>
<br>
<fieldset id="fieldset2" class="ex2">
<legend>.focusin() / .focusout() 【イベントのバブルアップあり】</legend>
<p>
<input id="input2" class="ex2" value="input" tabindex="11">
<button id="button2">.focusin()</button>
</p>
<p>
<select id="select2" class="ex2" size="3" tabindex="12">
<option>option1
<option>option2
<option>option3
</select>
</p>
<p><textarea id="textarea2" class="ex2" tabindex="13">textarea</textarea></p>
<p><a id="a2" class="ex2" href="#" tabindex="14">anchor</a></p>
<p>
<label id="label21" class="ex2">label tabindex 未指定</label>
<label id="label22" class="ex2" tabindex="15">label tabindex 指定</label>
</p>
<textarea id="output2" class="output">【出力】</textarea>
</fieldset>
<script>
function output(outputId, msg) {
var $output = $(outputId);
$output.val($output.val() + "\n" + msg);
}
// .focus() / .blur()
$(".ex1").focus("ex1", function(eventObject) {
$(this).addClass("classFocus");
var msg = eventObject.type + " [" + this.id + "] (" + eventObject.data + ")";
output("#output1", msg);
});
$(".ex1").blur("ex1", function(eventObject) {
$(this).removeClass("classFocus");
var msg = eventObject.type + " [" + this.id + "] (" + eventObject.data + ")";
output("#output1", msg);
});
$("#button11").click(function() {
$("#input1").focus();
});
$("#button12").click(function() {
$("#input1").triggerHandler("focus");
});
// .focusin() / .focusout()
$(".ex2").focusin("ex2", function(eventObject) {
$(this).addClass("classFocusIn");
var msg = eventObject.type + " [" + this.id + "] (" + eventObject.data + ")";
output("#output2", msg);
});
$(".ex2").focusout("ex2", function(eventObject) {
$(this).removeClass("classFocusIn");
var msg = eventObject.type + " [" + this.id + "] (" + eventObject.data + ")";
output("#output2", msg);
});
$("#button2").click(function() {
$("#input2").focusin();
});
</script>