コピペで使える JavaScript逆引きリファレンス

JavaScript/jQuery開発時に、こそっとお使いください。

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] 10進表記のカラーコードを16進表記に変換する

10進表記のカラーコードを16進表記に変換したい場合にご利用ください。 10進表記のカラーコードを16進表記に変換する ...

[JavaScript] セレクトボックスを未選択状態にする

セレクトボックスを未選択状態にするには、selectedIndexに -1 をセットすればOKです。 サンプルソース 例 ...

[JavaScript] 1970年1月1日からの経過ミリ秒を取得する(.getTime)

1970年1月1日からの経過ミリ秒を取得するには、.getTime()を使用します。 サンプルソース 例)1970/1/ ...

[JavaScript] テキストを選択した時イベントを取得する(onSelect)

テキストボックスやテキストエリア内の文字を選択したときのイベントを取得するには、onselectを使用します。 サンプル ...

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

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

スポンサーリンク