chamie/maskedNumberInput.html

## maskedNumberInput.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script>
function ge(elementName){ return document.getElementById(elementName); }
function copyInput(hi){
  var mask="(___) ___-__-__";
  var ouput = mask;
  var input = hi.value+"|";
  input = input.substr(0,10);
  for(var i=0; i<input.length;i++){
    var position = ouput.indexOf("_");
    ouput = ouput.substr(0, position)+ input[i] + ouput.substr(position+1);
  }
  ge("visibleInput").value = ouput;
}
function checkChar(event){
  return(
    (((event.keyCode>47) && (event.keyCode<58)  /* digits */
        || (event.keyCode>95) && (event.keyCode<106)) /* NumPad digits */
      && (event.currentTarget.value.length<10))
    ||(event.keyCode==8)); //Backspace
}
function blink(){
  if(document.activeElement == ge("hiddenInput")){
    if(flag) ge("visibleInput").value = ge("visibleInput").value.replace("|",String.fromCharCode(160));// &nbsp; char, to look like a space but distinguishable at replace
    else ge("visibleInput").value = ge("visibleInput").value.replace(String.fromCharCode(160),"|");
    flag = !flag;
  }
}
var flag = false;
setInterval(blink,500);
</script>
</head>
<body>
Введите номер:<br>
<input type="number" onkeydown="return(checkChar(event))" style="opacity:0;" id="hiddenInput" onkeyup="copyInput(this)"><br>
<input style="margin-top:-20px;font-family:monospace" id="visibleInput" onclick="ge('hiddenInput').focus()" value="(|__) ___-__-__">
</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
	<html>
	<head>
	<title>Untitled</title>
	<script>
	function ge(elementName){ return document.getElementById(elementName); }
	function copyInput(hi){
	var mask="(___) ___-__-__";
	var ouput = mask;
	var input = hi.value+"\|";
	input = input.substr(0,10);
	for(var i=0; i<input.length;i++){
	var position = ouput.indexOf("_");
	ouput = ouput.substr(0, position)+ input[i] + ouput.substr(position+1);
	}
	ge("visibleInput").value = ouput;
	}
	function checkChar(event){
	return(
	(((event.keyCode>47) && (event.keyCode<58) /* digits */
	\|\| (event.keyCode>95) && (event.keyCode<106)) /* NumPad digits */
	&& (event.currentTarget.value.length<10))
	\|\|(event.keyCode==8)); //Backspace
	}
	function blink(){
	if(document.activeElement == ge("hiddenInput")){
	if(flag) ge("visibleInput").value = ge("visibleInput").value.replace("\|",String.fromCharCode(160));//   char, to look like a space but distinguishable at replace
	else ge("visibleInput").value = ge("visibleInput").value.replace(String.fromCharCode(160),"\|");
	flag = !flag;
	}
	}
	var flag = false;
	setInterval(blink,500);
	</script>
	</head>
	<body>
	Введите номер:<br>
	<input type="number" onkeydown="return(checkChar(event))" style="opacity:0;" id="hiddenInput" onkeyup="copyInput(this)"><br>
	<input style="margin-top:-20px;font-family:monospace" id="visibleInput" onclick="ge('hiddenInput').focus()" value="(\|__) ___-__-__">
	</body>
	</html>