[JavaScript] 日付スラッシュ編集を行うテキストボックス – コピペで使える JavaScript逆引きリファレンス

フォーカスインすると「YYYYMMDD」形式、フォーカスアウトすると「YYYY/MM/DD」形式にするテキストボックスサンプルです。

日付スラッシュ編集を行うテキストボックス

例）focusInでスラッシュ編集を解除、focusOutでスラッシュ編集を行う

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

/**************************
 * スラッシュ編集を行うFunction
 **************************/
function toSlash(obj){
  if(new RegExp(/^[0-9]{8}$/).test(obj.value)){
    var str = obj.value.trim();
    var y = str.substr(0,4);
    var m = str.substr(4,2);
    var d = str.substr(6,2);
    obj.value = y + "/" + m + "/" + d;
  }
}

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

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

* スラッシュ編集を行うFunction

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

function toSlash(obj){

if(new RegExp(/^[0-9]{8}$/).test(obj.value)){

var str = obj.value.trim();

var y = str.substr(0,4);

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

var d = str.substr(6,2);

obj.value = y + "/" + m + "/" + d;

}

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

* スラッシュ編集を解除するFunction

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

function offSlash(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>Sample</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="text" onfocus="offSlash(this);" onblur="toSlash(this);" >
</body>
</html>

<head>

<title>Sample</title>

</head>

<body>

</body>

</html>

実行サンプル

フォーカスインでスラッシュ編集解除、フォーカスアウトでスラッシュ編集を行います。

解説

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

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

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

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

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

window.onload = function(){

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

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

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

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

}

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