投稿日
NablarchのJSPカスタムタグでフォーカスアウトした時に処理を実行したい
はじめに
はじめまして。テクノロジー&エンジニアリングセンターの羽部(はぶ)と申します。新人研修や、ITアーキテクト育成などの技術者育成を担当しています。
今回は、Nablarch解説書に記載されていない情報の補完を目的に記事を書きました。「こういう時はどうするの?」といった情報をお伝えします。
Nablarchが提供しているJSPカスタムタグ の中には、text
タグなどの入力を行うカスタムタグがあります。 それらを使って作った入力フォームで、ある入力欄から次の入力欄に移動した時に何か処理をしたい、ということは比較的よくある話でしょう。例えばある入力項目からフォーカスアウトした時にその入力欄に対して、フォーマット(金額欄であれば3桁ごとに”,”を挿入するなど)したり、別の入力欄に自動入力させたりしたいといった場合です。
本記事ではその方法を紹介します。
フォーカスアウトした時に処理を実行したい
テキストボックスに入力した文字を、別のテキストボックスに自動入力させる場合を例に説明します。テキストボックスのonblur
属性を使います。
<html>
<head>
<script type="text/javascript">
<!--
function setText(src, target){
nameText = document.getElementsById(target);
nameText[0].value = src.value;
}
-->
</script>
</head>
<body>
<n:form>
<n:text
name="loginId"
onblur="setText(this, \"targetText\");"/>
<n:text
id="targetText"
name="autoInput"/>
<!-- ~後略~ -->
</n:form>
</body>
</html>
onblur
属性の属性値には、その要素がフォーカスを失った時に実行する処理を記述します。ですから、2つの要素を引数で受け取ってその値をコピーする処理をここに指定してやれば、自動入力の完成です。上のサンプルでは、setText
というJavaScript関数がその処理をしています。
入力値のフォーマットであれば、ある要素を受け取って、その要素の値をフォーマットするJavaScript関数を用意します。そのJavaScript関数を、フォーカスアウト時にフォーマットしたい入力項目のonblur
属性に指定してやれば実現できます。
おわりに
いかがだったでしょうか。JSPカスタムタグでも、onblur
を使えます。皆さんの開発の一助になれば幸いです。
本コンテンツはクリエイティブコモンズ(Creative Commons) 4.0 の「表示—継承」に準拠しています。