Created
July 22, 2015 09:04
-
-
Save chamie/fc5725872182b50112a3 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
An overcomplicated workaround to get an input field to work like a masked input while forcing mobile browsers to show a numeric onscreen keyboard.
Done by keeping the actual cursor in a hidden "number"-type input, copying the value on "keyup" and drawing a fake blinking cursor.