はじめに

はじめまして。テクノロジー&エンジニアリングセンターの羽部(はぶ)と申します。新人研修や、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 の「表示—継承」に準拠しています。