JavaScriptのonblurイベント―テキストフィールド0埋め補完の例など

onblurイベントはフォーカスが外れたときのイベントです。テキストフィールド0埋め補完の例など。JavaScriptのonblurイベントについてまとめています。

▲記事トップへ

1. onblurとは

onblurとは、フォーカスがフォームやウィンドウから離れたときのイベントを取得するイベントハンドラです。

読み方

onblurの読み方は「オンブラー（オンブラァー）」です。

onblurは「on」と「blur」がくっついた単語です。「blur」の発音は「 blə'ːr 」ですので「オンブラー（オンブラァー）」という読み方になりますね。

2. onblurイベントの解説

onblurイベントはフォーカスが外れたときに発生するイベントです。

フォーカス

htmlのinputタグのtype属性がtextのフォームなどでマウスカーソルが点滅していたり、type属性がradioのフォームやcheckboxのフォームがチェックされたり、ウィンドウがアクティブになっているなどの状態が、フォーカスがある状態になります。

onblurイベントでの処理

フォームを移動したり、フォーカスがあるウィンドウとは別ウィンドウをクリックすることなどで、フォーカスが移動したときをイベントとして取得し、設定した処理を実行します。

3. JavaScriptでonblurイベントを使用したサンプルコードの一覧

以下ではJavaScriptでonblurイベントを使用するサンプルプログラムを見ていきます。

以下はページ内の各サンプルへのリンクです。

テキストフィールド0埋め補完の例
未入力時に入力を促すメッセージ表示の例
テキストエリアのHTMLタグを取り除く例

onblurイベントを使用したテキストフィールド0埋め補完の例

JavaScriptでonblurイベントを使用したテキストフィールド0埋め補完の例を以下に示します。

サンプルソース

inputタグのonblur属性でonblurイベント発生時の処理にfillZere関数を登録します。

fillZere関数では、テキストフィールドへの入力値が8ケタに満たない場合、テキストフィールドからフォーカスが外れたタイミングで先頭にゼロを追加する例を示します。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="text" id="code" onblur="fillZere(this)">
<script type="text/javascript">
function fillZere(element) {
	var value = element.value;
	while (value.length < 8) {
		value = '0' + value;
	}
	element.value = value;
}
</script>
</body>
</html>

表示方法と表示結果

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。表示した結果は次のようになります。

入力フォームに例えば「1」と入力します。

JavaScriptのonblurイベントを使用したテキストフィールド0埋め補完の例―補完前

するとフォーカスが外れたときにonblurイベントが発生し、テキストフィールドへの入力値が8ケタに満たないので、「00000001」のようにテキストフィールド0埋めに補完されます。

JavaScriptのonblurイベントを使用したテキストフィールド0埋め補完の例―補完後

サンプルプログラムの一覧へ

onblurイベントを使用した未入力時に入力を促すメッセージ表示の例

今度はonblurイベントを使用してテキストフィールドが未入力の場合に入力を促すメッセージを表示する例を見ていきます。

サンプルソース

inputタグのonblur属性でonblurイベント発生時の処理にshowSupportMessage関数を登録します。

showSupportMessage関数では、テキストフィールドへの入力が無い場合にidがaのタグのテキストに「入力は必須です。」と書き込みます。逆に入力がある場合はidがaのタグのテキストをクリアします。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="text" id="code" onblur="showSupportMessage(this)">
<p id="a"></p>
<script type="text/javascript">
function showSupportMessage(element) {
    if (!element.value) {
        document.getElementById('a').innerHTML='入力は必須です。';
    } else {
        document.getElementById('a').innerHTML='';
    }
}
</script>
</body>
</html>

表示方法と表示結果

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。表示した結果は次のようになります。

ページ表示直後はメッセージは表示されません。

onblurイベントを使用した未入力時に入力を促すメッセージ表示の例―ページロード直後

テキストフィールドが未入力の状態でフォーカスを移すとonblurイベントが発生し、showSupportMessage関数の処理が行われます。未入力のため、showSupportMessage関数では「入力は必須です。」とidがaのタグのテキストに書き込みます。

onblurイベントを使用した未入力時に入力を促すメッセージ表示の例―未入力でフォーカスを移した後

テキストフィールドが入力状態でフォーカスを移す場合もonblurイベントが発生し、showSupportMessage関数の処理が行われる動きは同じで。未入力の場合は、showSupportMessage関数ではとidがaのタグのテキストをクリアします。

onblurイベントを使用した未入力時に入力を促すメッセージ表示の例―入力してフォーカスを移した後

サンプルプログラムの一覧へ

onblurイベントを使用してテキストエリアからHTMLタグを取り除く例

今度はonblurイベントを使用してテキストエリアからHTMLタグを取り除く例を見ていきます。

サンプルソース

textareaタグのonblur属性でonblurイベント発生時の処理にtrimHtmlTag関数を登録します。

trimHtmlTag関数では、テキストエリアに入力された文章の中にHTMLタグが含まれていたらそのHTMLタグを削除します。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<textarea type="textarea" id="code" onblur="trimHtmlTag(this)" cols="40" rows="5"></textarea>
<script type="text/javascript">
function trimHtmlTag(element) {
	var value = element.value;
	value = value.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'');
	element.value = value;
}
</script>
</body>
</html>