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] 平方根を求める(Math.sqrt)

平方根を求めるには、Math.sqrt()を使用します。 構文 (aの平方根を求めてxに代入する) var x = Ma ...

[JavaScript] ブラウザのリロード(再読込)ボタンを実装する

ブラウザの「リロード」(再読込)ボタンを実装するサンプルです。 window.location.reloadを使用します ...

[JavaScript] URLからポート番号を取得する(location.port)

URLからポート番号を取得するには、location.portを使用します。 サンプルソース 例)現在のページのURLか ...

[JavaScript] オブジェクト名を省略してコーディングする(withブロック)

オブジェクト名を省略してコーディングするには、withを使用します。 withブロックを使う withブロックを使うと、 ...

[JavaScript] URLのホスト名を取得する(location.hostname)

URLのホスト名を取得するには、location.hostnameを使用します。 サンプルソース 例)現在のページのUR ...

スポンサーリンク