トップ 言語 JavaScript 入門編 イベントとイベントハンドラ 各種イベント onblurイベント

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

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

onblurイベント

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

onblurとは

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

フォーカス

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

onblurイベントでの処理

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

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

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

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

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>

表示方法と表示結果

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

例えば、scriptタグでアラートを表示させるようなHTMLの改ざんを行うような入力があったとします。

onblurイベントを使用してテキストエリアからHTMLタグを取り除く例―ページロード直後

テキストフィールドが未入力の状態でフォーカスを移すとonblurイベントが発生し、trimHtmlTag関数の処理が行われます。 trimHtmlTagによりHTMLタグが削除され、無害化されます。

onblurイベントを使用してテキストエリアからHTMLタグを取り除く例―入力してフォーカスを移した後

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

もっと知識を広げるための参考

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Bcc /Eclipse /gcc /gdb /g++ /JDK /JUnit /ZAP

技術・仕様
Ajax /CORBA /Java EE(旧称J2EE) /JNI

ライブラリ/Framework/CMS
jQuery /Lucene /MyBatis /RESTEasy /Spring /Struts /Seasar2 /WordPress

ITインフラ OSとミドルウェア
Linux /Windows /シェル
Apache/Tomcat /MySQL /Redis /Solr /vsftpd

ITインフラ PC 製品
ZOTAC

ITインフラ サーバー
Web公開サーバー構築

ITインフラ ネットワーク
プログラミング /機器 /構築

ITインフラ セキュリティ
公開サーバーのセキュリティ

SI
ホームページの作り方 /小さな会社のISMS

その他
IT用語 /ITスキル体系 /トレンド履歴

スポンサーリンク