[JavaScript] 郵便番号のハイフン編集を行うテキストボックス – コピペで使える JavaScript逆引きリファレンス

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

サンプルソース

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

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

/**************************
 * 郵便番号編集を行うFunction
 **************************/
function toPostFmt(obj){
  if((obj.value).trim().length == 7 && !isNaN(obj.value)){
    var str = obj.value.trim();
    var h = str.substr(0,3);
    var m = str.substr(3);
    obj.value = h + "-" + m;
  }
}

/**************************
 * 郵便番号編集を解除するFunction
 **************************/
function offPostFmt(obj){
  var reg = new RegExp("-", "g");
  var chgVal = obj.value.replace(reg, "");
  if(!isNaN(chgVal)){
    obj.value = chgVal;  //値セット
    obj.select();        //全選択
  }
}

/**************************

* 郵便番号編集を行うFunction

**************************/

function toPostFmt(obj){

if((obj.value).trim().length == 7 && !isNaN(obj.value)){

var str = obj.value.trim();

var h = str.substr(0,3);

var m = str.substr(3);

obj.value = h + "-" + m;

}

/**************************

* 郵便番号編集を解除するFunction

**************************/

function offPostFmt(obj){

var reg = new RegExp("-", "g");

var chgVal = obj.value.replace(reg, "");

if(!isNaN(chgVal)){

obj.value = chgVal; //値セット

obj.select(); //全選択

}

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="text" onfocus="offPostFmt(this);" onblur="toPostFmt(this);" >
</body>
</html>

<head>

</head>

<body>

</body>

</html>

実行サンプル

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

解説

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

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

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

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

window.onload = function(){
 var elements = document.getElementsByClassName("postcd");
 for(var i=0;i<elements.length;i++){
    elements[i].onfocus = function(){offPostFmt(this);}
    elements[i].onblur = function(){toPostFmt(this);}
 }
}

window.onload = function(){

var elements = document.getElementsByClassName("postcd");

for(var i=0;i<elements.length;i++){

elements[i].onfocus = function(){offPostFmt(this);}

elements[i].onblur = function(){toPostFmt(this);}

}

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="text" class="postcd" >
</body>
</html>

<head>

</head>

<body>

</body>

</html>

解説

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