JavaScript フォーカスした際に処理を行う
ブラウザにはフォーカスを扱うメソッドがいくつか用意されています。特定のテキストフィールドにフォーカスを移す場合は、「focus()」メソッドを使います。テキストフィールドの場合、入力済みの文字を選択状態にしたいのであれば、「focus()」メソッドを続けて「select()」メソッドを呼び出します。テキストフィールドなどにフォーカスされると、「focus」イベントが発生します。逆にフォーカスが外れると、「blur」イベントが発生します。イベント発生時に処理を行う場所、イベントリスナーなどを使ってイベントハンドラを設定します。イベントハンドラにはイベントオブジェクトが渡されるので、イベントが発生した要素に対して何か処理を行うこともできます。
<body>
<script>
window.addEventListener("load" , function(){
var ele = document.getElementsByTagName("output")[0];
//最初のテキストフィールドにフォーカス
var fld1 = document.getElementById("uName");
fld1.focus();
//さらに選択。その旨メッセージを表示
fld1.select();
ele.innerHTML = "最初のテキストフィールドにフォーカスし選択しました。";
//2番目のテキストフィールドにフォーカスした場合の処理
var fld2 = document.getElementById("uAge");
fld2.addEventListener("focus",function(evt){
var targetID = evt.target.id;
ele.innerHTML = "ID名："+targetID+"のフィールドにフォーカスしました";
},false);
//2番目のテキストフィールドにフォーカスが外れた場合の処理
fld2.addEventListener("blur",function(evt){
ele.innerHTML = "フォーカスが外れました";
},false);
}, false);
</script>
<h1>フォーカス処理</h1>
<form>
名前：<input type="text" value="KF" id="uName"><br>
年齢：<input type="text" value="18" id="uAge">
</form>
<output></output>
</body>ページが読み込まれると、最初のフィールドにフォーカスが移って内容が選択されます。
２番目のフィールドにフォーカスを移すと、フォーカスがされたことを示す文字が表示されます。
フォーカスが外れると、フォーカスが外れたことを示す文字が表示されます。
