Webページ入力フィールド制限、ToolTip

今まで過去から何度も書いたものをまとめる。
過去。。。
入力フィールドでよく使いそうな jQuery 処理のメモ - Oboe吹きプログラマの黙示録
input タグ type="number" のスピンボタンを非表示 - Oboe吹きプログラマの黙示録
chromeで０以上の整数入力に限定する - Oboe吹きプログラマの黙示録
chrome で、何がなんでも全角入力させない - Oboe吹きプログラマの黙示録
chrome で、何がなんでも全角入力させない - Oboe吹きプログラマの黙示録
全角英数字→半角英数字 - Oboe吹きプログラマの黙示録

chrome限定ではなく、Edge 、IE11 でも有効で、尚且つ、全角モードやNumLockキーなど ToolTip で警告

ＣＳＳとして以下を用意 input-support.css

@CHARSET "UTF-8";
/*--- type="number" のスピンボタンを非表示 --------*/
input[type="number"]{
  -moz-appearance:textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
/*---- for ToolTip --------------------------------*/
.ui-tooltip {
  font-size: 14px;
  border-radius: 6px;
  color: #000000;
  background: #ffffe0;
  z-index: 20002;
  opacity: 0.85;
  filter: alpha(opacity=85);
  -ms-filter: "alpha(opacity=85)";
}

jQuery ソース

/**
 * input-support.js
 */
/* for 全角数字入力→ 半角数字 */
var numberConvert = function(value){
  var str = new String(value);
  var han = str.replace(/[０-９]/g, function(s){ return String.fromCharCode(s.charCodeAt(0)-0xFEE0); });
  return han.replace(/[\-|ー|―|－]/, function(s){ return '-'; }).replace(/[。．]/g, ".");
};
/* 全角英数字→半角英数字 */
var zenkakuTohan = function(value){
  var str = new String(value);
  var han = str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s){ return String.fromCharCode(s.charCodeAt(0)-0xFEE0); });
  return han.replace(/[\-|ー|―|－]/g, "-").replace(/[。．]/g, ".");
};
/* 数値→３桁区切り : 逆は、.replace(/,/g, ''); を使う */
var digitFormat = function(str){
   var num = new String(str).replace(/,/g, "");
   while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
   return num;
};
/* 全角数字→半角数字 */
var zenkakuNumToHan = function(txt){
  return txt.replace(/[０-９]/g, function(s){ return String.fromCharCode(s.charCodeAt(0)-0xFEE0); });
};
/* ひらがな→カタカナ */
var hirakanaTokatakana = function(txt){
   return txt.replace(/[ぁ-ん]/g, function(s){ return String.fromCharCode(s.charCodeAt(0)+0x0060); });
}
/* カタカナ→ひらがな */
var hirakanaTokatakana = function(txt){
   return txt.replace(/[ァ-ン]/g, function(s){ return String.fromCharCode(s.charCodeAt(0)-0x0060); });
}
/* 日付入力チェック */
var isValidDate = function(s){
   if (!s.match(/^\d{4}\/(0{0,1}[1-9]|1[012])\/(0{0,1}[1-9]|[12][0-9]|3[01])$/)){
      return true;
   }
   var ary = s.split(/\//);
   var y = ary[0];
   var m = parseInt(ary[1], 10);
   var d = parseInt(ary[2], 10);
   if(m < 1 || m > 12 || d < 1 || d > 31) {
      return true;
   }
   var dt = new Date(y, m - 1, d, 0, 0, 0, 0);
   if(dt.getFullYear() != y || dt.getMonth() != m - 1 || dt.getDate() != d){
      return true;
   }
   return false;
};
/**
 * Tooltip 実行
 */
var callTooltip = function(input, message){
  $(input).prop("title", "");
  $(input).tooltip({
    content: message,
    show: { effect: "slideDown" },
    hide: { effect: "slideDown" },
  });
  $(input).tooltip("open");
  setTimeout("$('" + input + "').tooltip('close');$('" + input + "').tooltip('destroy');", 1000);
};

/**
 * 強制入力セット関数。
 *     class="ank-text" class="num-text" 、id が必須
 * 半角英数字（コピーペースト不可） : ank-text
 * 半角英数字（コピーペースト可能） : ank-pastable-text
 * 半角数字                         : num-text
 * 時刻 HH:mm:ss                    : time-text
 * 金額入力（半角）                 : money-text
 */
var inputHankakuForce = function(){
  // 半角英数
  $('input.ank-text').focus(function(eo){
    $(this).prop('type','tel');
  }).blur(function(eo){
    $(this).prop('type','text');
    $(this).val(zenkakuTohan($(this).val()));
  }).bind("paste",function(){
    return false;
  }).keyup(function(eo){
    $(this).val(zenkakuTohan($(this).val()));
    if (eo.keyCode==229){return false;  }
  }).keydown(function(eo){
    if ((eo.keyCode >= 33 && eo.keyCode <= 39)|| eo.keyCode==40 
       || eo.keyCode==45 || eo.keyCode==46 || eo.keyCode==12){
      if (event.getModifierState("NumLock")===false){
        callTooltip("#"+$(this).prop("id"), "NumLock OFF(消灯) になってます");
      }
    }
    if (eo.keyCode==229){
      callTooltip("#"+$(this).prop("id"), "全角入力になってます");
      return false;
    }
  });
  // 半角英数（コピーペースト可能）
  $('input.ank-pastable-text').focus(function(eo){
    $(this).prop('type','tel');
  }).blur(function(eo){
    $(this).prop('type','text');
    $(this).val(zenkakuTohan($(this).val()));
  }).keyup(function(eo){
    $(this).val(zenkakuTohan($(this).val()));
    if (eo.keyCode==229){return false;  }
  }).keydown(function(eo){
    if ((eo.keyCode >= 33 && eo.keyCode <= 39)|| eo.keyCode==40
         || eo.keyCode==45 || eo.keyCode==46 || eo.keyCode==12){
      if (event.getModifierState("NumLock")===false){
        callTooltip("#"+$(this).prop("id"), "NumLock OFF(消灯) になってます");
      }
    }
    if (eo.keyCode==229){
      callTooltip("#"+$(this).prop("id"), "全角入力になってます");
      return false;
    }
  });
  // 半角数字
  $('input.num-text').focus(function(eo){
    $(this).prop('type','tel');
  }).blur(function(eo){
    $(this).prop('type','text');
    $(this).val(numberConvert($(this).val()));
  }).bind("paste",function(){
    return false;
  }).keyup(function(eo){
    $(this).val(numberConvert($(this).val()).replace(/[^\-0-9]/g, ''));
    if (eo.keyCode==229){return false;  }
  }).keydown(function(eo){
    if ((eo.keyCode >= 33 && eo.keyCode <= 39)|| eo.keyCode==40
        || eo.keyCode==45 || eo.keyCode==46 || eo.keyCode==12){
      if (event.getModifierState("NumLock")===false){
        callTooltip("#"+$(this).prop("id"), "NumLock OFF(消灯) になってます");
      }
    }
    if (eo.keyCode==229){
      callTooltip("#"+$(this).prop("id"), "全角入力になってます");
      return false;
    }
  });
  // 時刻 HH:mm:ss
  $('input.time-text').focus(function(eo){
    $(this).prop('type','tel');
  }).blur(function(eo){
    $(this).prop('type','text');
    $(this).val(numberConvert($(this).val()));
    if (!$(this).val().match(/^(0[0-9]|1[0-9]|2[0-3]):(0[0-9]|[0-5][0-9]):(0[0-9]|[0-5][0-9])$/)){
      callTooltip("#"+$(this).prop("id"), "HH:mm:ss 形式でありません");
    }
  }).bind("paste",function(){
    return false;
  }).keyup(function(eo){
    $(this).val(numberConvert($(this).val()).replace(/：/g, ':').replace(/[^0-9:]/g, ''));
    if (eo.keyCode==229){return false;  }
  }).keydown(function(eo){
    if ((eo.keyCode >= 33 && eo.keyCode <= 39)|| eo.keyCode==40
         || eo.keyCode==45 || eo.keyCode==46 || eo.keyCode==12){
      if (event.getModifierState("NumLock")===false){
        callTooltip("#"+$(this).prop("id"), "NumLock OFF(消灯) になってます");
      }
    }
    if (eo.keyCode==229){
      callTooltip("#"+$(this).prop("id"), "全角入力になってます");
      return false;
    }
  });
  // 日付入力 yyyy/MM/dd
  $('input.date-text').focus(function(eo){
    $(this).prop('type','tel');
  }).blur(function(eo){
    $(this).prop('type','text');
    $(this).val(numberConvert($(this).val()));
    if (isValidDate($(this).val())){
      callTooltip("#"+$(this).prop("id"), "日付エラー yyyy/MM/dd");
    }
  }).bind("paste",function(){
    return false;
  }).keyup(function(eo){
    $(this).val(numberConvert($(this).val()).replace(/／/g, '/').replace(/[^0-9\/]/g, ''));
    if (eo.keyCode==229){return false;  }
  }).keydown(function(eo){
    if ((eo.keyCode >= 33 && eo.keyCode <= 39)|| eo.keyCode==40
          || eo.keyCode==45 || eo.keyCode==46 || eo.keyCode==12){
      if (event.getModifierState("NumLock")===false){
        callTooltip("#"+$(this).prop("id"), "NumLock OFF(消灯) になってます");
      }
    }
    if (eo.keyCode==229){
      callTooltip("#"+$(this).prop("id"), "全角入力になってます");
      return false;
    }
  });

  // 金額入力（半角）
  $('input.money-text').focus(function(eo){
    $(this).prop('type','tel');
  }).blur(function(eo){
    $(this).prop('type','text');
    $(this).val(numberConvert($(this).val()));
  }).bind("paste",function(){
    return false;
  }).keyup(function(eo){
    var value = numberConvert($(this).val()).replace(/[^\-0-9]/g, '');
    if (value.match(/^(|-)[0-9]+$/)){
      $(this).val(digitFormat(value));
    }
    if (eo.keyCode==229){return false;  }
  }).keydown(function(eo){
    if ((eo.keyCode >= 33 && eo.keyCode <= 39)|| eo.keyCode==40
          || eo.keyCode==45 || eo.keyCode==46 || eo.keyCode==12){
      if (event.getModifierState("NumLock")===false){
        callTooltip("#"+$(this).prop("id"), "NumLock OFF(消灯) になってます");
      }
    }
    if (eo.keyCode==229){
      callTooltip("#"+$(this).prop("id"), "全角入力になってます");
      return false;
    }
  });
  // ＩＰアドレス
  $('input.ip-text').focus(function(eo){
    $(this).prop('type','tel');
  }).blur(function(eo){
    $(this).prop('type','text');
    $(this).val(numberConvert($(this).val()));
    var a = $(this).val().split(/\./);
    if (a.length != 4){
      callTooltip("#"+$(this).prop("id"), "IP address エラー");
    }
    var error = 0;
    $.each(a, function(i, t){
      if (t < 0 || 255 < t) error = 1;
    });
    if (error==1){
      callTooltip("#"+$(this).prop("id"), "IP address エラー");
    }
  }).bind("paste",function(){
    return false;
  }).keyup(function(eo){
    $(this).val(numberConvert($(this).val()).replace(/[^0-9\.]/g, ''));
    if (eo.keyCode==229){return false;  }
  }).keydown(function(eo){
    if ((eo.keyCode >= 33 && eo.keyCode <= 39)|| eo.keyCode==40
         || eo.keyCode==45 || eo.keyCode==46 || eo.keyCode==12){
      if (event.getModifierState("NumLock")===false){
        callTooltip("#"+$(this).prop("id"), "NumLock OFF(消灯) になってます");
      }
    }
    if (eo.keyCode==229){
      callTooltip("#"+$(this).prop("id"), "全角入力になってます");
      return false;
    }
  });
};

HTML

<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.12.1.min.css">
<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.12.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="input-support.css">
<script type="text/javascript" src="input-support.js"></script>

<script type="text/javascript">
$(function(){
  inputHankakuForce();
});
</script>
<style type="text/css">
table{ white-space: nowrap; }
</style>
</head>
<body>
<form>
<table>
  <tr>
    <td>半角英数字 only（コピーペースト不可）</td>
    <td><input id="a1" type="text" class="ank-text"></td>
  </tr>
  <tr>
    <td>半角英数字 only（コピーペースト可能）</td>
    <td><input id="a2" type="text" class="ank-pastable-text"></td>
  </tr>
  <tr>
    <td>半角数字 only（全角数字→半角自動変換）</td>
    <td><input id="n1" type="text" class="num-text"></td>
  </tr>
  <tr>
    <td>時刻（hh:mm:ss）</td>
    <td><input id="t1" type="text" class="time-text" maxlength="8"></td>
  </tr>
  <tr>
    <td>日付（yyyy/MM/dd）</td>
    <td><input id="t1" type="text" class="date-text" maxlength="10"></td>
  </tr>
  <tr>
    <td>金額（３桁区切り）</td>
    <td><input id="y1" type="text" class="money-text"></td>
  </tr>
  <tr>
    <td>ＩＰ－address</td>
    <td><input id="y1" type="text" class="ip-text" maxlength="15"></td>
  </tr>
</table>