cman.jp > WEBページ作成TOP > javascriptサンプル
WEBページ作成
広告
フォーカスイベント
広告
フォーカスイベントの発生確認
【テキスト入力でのフォーカスイベント確認】
<style type="text/css">
.bg_white { background-color: #ffffff;font-weight: bold;}
.bg_aqua {background-color: #00ffff;font-weight: bold;}
</style>
<script type="text/javascript">
function incheck(obj){
var str=obj.value;
if(str.match(/[^0-9]/g)){ alert ("半角数値以外が入力されています");
obj.focus();
}else{
obj.className="bg_white";} }
function bgchange(obj){
obj.className="bg_aqua"; }
</script>
<input id="inkey" type="text" name="keytext" maxlength="20" placeholder="入力エリア"
onblur="incheck(this)"
onfocus="bgchange(this)">
.bg_white { background-color: #ffffff;font-weight: bold;}
.bg_aqua {background-color: #00ffff;font-weight: bold;}
</style>
<script type="text/javascript">
function incheck(obj){
var str=obj.value;
if(str.match(/[^0-9]/g)){ alert ("半角数値以外が入力されています");
obj.focus();
}else{
obj.className="bg_white";} }
function bgchange(obj){
obj.className="bg_aqua"; }
</script>
<input id="inkey" type="text" name="keytext" maxlength="20" placeholder="入力エリア"
onblur="incheck(this)"
onfocus="bgchange(this)">
下記入力エリアに入力してください。
onfocusで背景色変更、onblurで数値以外はエラーになります。
また、発生したイベント名がテキストエリアに発生順に表示されます。
（最大20文字まで入力可能）
onfocusで背景色変更、onblurで数値以外はエラーになります。
また、発生したイベント名がテキストエリアに発生順に表示されます。
| イベント処理・表示対象イベント選択 | |
|---|---|
| 全選択／解除 | focus blur |
注意事項
- onblurと類似したonfocusoutを同一の要素に指定した場合、onfocusout→onblurの順に発生します。
※onfocusoutは、W3Cのイベント一覧には記載されていません。onfocusoutは、フォーカスを失う直前に発生します。
広告