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] 定数を定義する(const)

JavaScriptで定数を定義するには、constを使用します。 ※ECMAScript6以降対応ブラウザで使用可能で ...

[JavaScript] 関数をパッケージ化する

関数をパッケージ化して使うサンプルです。 同じような共通関数をパッケージ化しておくと、コードがとてもすっきりします。 サ ...

[JavaScript] 画像をキャッシュさせない方法

HTMLで画像を表示するにはimgタグを使用しますが、一度使用した画像はブラウザにキャッシュされるため意図しない画像が表 ...

[JavaScript] ブラウザの言語設定を取得する(navigator.language、navigator.languages)

ブラウザの言語設定を取得するには、 navigator.language、navigator.languagesを使用し ...

[JavaScript] JavaScriptが使えない環境でメッセージを表示する

JavaScript禁止にしているブラウザの場合にメッセージを表示するにはnoscriptタグを使用します。 サンプルソ ...

スポンサーリンク