JavaScript

[JavaScript] 郵便番号のハイフン編集を行うテキストボックス

投稿日:2016年11月3日 更新日:

フォーカスインするとハイフン無し郵便番号、
フォーカスアウトするとハイフン有り郵便番号にするテキストボックスサンプルです。

サンプルソース

例)フォーカスインで郵便番号編集を解除、フォーカスアウトで郵便番号編集を行う

※数値7桁でない場合は編集を行わない

実行サンプル

フォーカスインで郵便番号編集解除、フォーカスアウトで郵便番号編集を行います。

解説

  • onFocus/onBlueイベントハンドラを使用してハイフン編集/解除を行っています。
  • 数値7桁でない場合はコロン編集を行いません。
  • 初期表示時は、ハイフン編集をした数値をセットしておく必要があります。

テキストボックスにonfocus/onblurを指定しないパターン

ハイフン編集を行うテキストボックスが1つであればタグにonfocus/onblurを書いても問題ありませんが、複数ある場合だと全てのテキストボックスにonfocus/onblurを書かなければならず、見た目やメンテナンス性が悪くなってしまいます。


そこで以下のように記述すれば、class="postcd"と指定された全てのテキストボックスが郵便番号編集されるようになります。

解説

  • ロードイベントでclass="postcd"が指定されたもの全てに対して、onfocus/onblurイベントを追加して実現しています。
  • 先サンプルのtoPostFmt関数、offPostFmt関数の定義は必要です。
  • class="postcd"を指定するのはテキストボックスのみに指定してください。

スポンサーリンク

スポンサーリンク

-JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[JavaScript] ブラウザ上の要素の表示/非表示を切替える(非表示時は詰まる)

ブラウザ表示上の指定した箇所の表示/非表示を切り替えるサンプルです。 非表示時は表示領域が詰まって表示されます。 サンプ ...

[JavaScript] id名からオブジェクトを取得する

タグに付けられたid名からオブジェクトを取得するには、 document.getElementByIdを使用します。 サ ...

[JavaScript] タグ名からオブジェクトを取得する

タグ名からオブジェクトを取得するには、 document.getElementsByTagNameを使用します。 サンプ ...

[JavaScript] 配列の要素をシャッフルする

配列の要素をシャッフルするサンプルです。 サンプルソース 例)引数に受け取った配列をシャッフルするFunction [c ...

[JavaScript] セレクトボックス値を動的に生成する

連想配列オブジェクトの値から、セレクトボックスの要素を動的に生成するサンプルです。 サンプルソース 例)連想配列arrの ...

スポンサーリンク