[JavaScript] 時間のコロン編集を行うテキストボックス – コピペで使える JavaScript逆引きリファレンス

フォーカスインすると「HHmm」形式、フォーカスアウトすると「HH:mm」形式にするテキストボックスサンプルです。

時間のコロン編集を行うテキストボックス

例）フォーカスインでコロン編集を解除、フォーカスアウトでコロン編集を行う

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

/**************************
 * コロン編集を行うFunction
 **************************/
function toColon(obj){
  if((obj.value).trim().length == 4 && !isNaN(obj.value)){
    var str = obj.value.trim();
    var h = str.substr(0,2);
    var m = str.substr(2,2);
    obj.value = h + ":" + m;
  }
}

/**************************
 * コロン編集を解除するFunction
 **************************/
function offColon(obj){
  var reg = new RegExp(":", "g");
  var chgVal = obj.value.replace(reg, "");
  if(!isNaN(chgVal)){
    obj.value = chgVal;  //値セット
    obj.select();        //全選択
  }
}

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

* コロン編集を行うFunction

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

function toColon(obj){

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

var str = obj.value.trim();

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

var m = str.substr(2,2);

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

}

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

* コロン編集を解除するFunction

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

function offColon(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="offColon(this);" onblur="toColon(this);" >
</body>
</html>

<head>

</head>

<body>

</body>

</html>

実行サンプル

フォーカスインでコロン編集解除、フォーカスアウトでコロン編集を行います。

解説

onFocus/onBlueイベントハンドラを使用してコロン編集/解除を行っています。
数値４桁でない場合はコロン編集を行いません。
初期表示時は、コロン編集をした数値をセットしておく必要があります。
時間整合性チェックは行っていません。必要な場合は以下を参考に追加してください。（文字列がHHmm形式の時間文字列であるかどうかチェックする）

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

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

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

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

window.onload = function(){

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

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

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

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

}

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="text" class="hm" >
</body>
</html>

<head>

<title>Sample</title>

</head>

<body>

</body>

</html>

補足

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