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] 入力ダイアログを表示する(window.prompt)

入力ダイアログを表示するには、window.prompt()を使用します。 サンプルソース 例)入力ダイアログを表示する ...

[JavaScript] canvasに四角形を描画する(strokeRect、fillRect)

canvasに四角形を描画するには、strokeRect、fillRectを使用します。 サンプルソース 例)canva ...

[JavaScript] ローカル時刻を取得する(.toLocaleString)

ローカル時刻を取得するには、.toLocaleString()を使用します。 サンプルソース 例)現在日時のローカル時刻 ...

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

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

[JavaScript] スクロール イベントを取得する(onScroll)

スクロールイベントを取得するには、onscrollイベントハンドラを使用します。 サンプルソース スクロールすると、スク ...

スポンサーリンク