-
Masked Edit Input?
Hi,
First let me state that I'm a novice at JavaScript. (I'm trying to break my VBScript habit.)
What I'm trying to create is an input box that simulates the Masked Edit box in VB. It will be for entering dates.
What I'm thinking is the initial value of the input field would be " / / ". That is position 1 and 2 would be blanks (spaces), position 3 would be "/", etc.
When a number is put in position 2 the cursor would automatically move to position 4, keeping the "/" in position 3. (The same would happen for positions 5,6,7.)
Also, if a number is placed in position 1 only, then the TAB is hit, the cursor should move to position 4.
I've tried various permutations of code snippets that I've found but I'm not having much luck.
Any help will be appreciated.
Thanks,
Al.
-
try this
http://www.dhtml-zone.com/articles/n...nz012402-1.asp
I think this should do the trick, I used it once and it worked fine
-
Hi,
Thanks for the response. I did find that site during my search for ideas. But it didn't help me do what I'm trying to do.
Below is some other pieces of code I was trying to modify/integrate. I added comments at the top.
My main problem has been in getting the cursor to automatically move from say position 2 to position 4 and keeping whatever character in position 3.
For example in the first code below after the "MM" is put in I'm trying to move the cursor to the "DD" while keeping the "/" in the third spot.
Code:
This code overwrites the input field value at the cursor position only.
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM NAME="formName">
<INPUT TYPE="text"
NAME="date"
VALUE="MM/DD/YY"
SIZE="10" STYLE="font-family: 'Courier New';"
ONFOCUS="this.select();
this.oldValue = this.value;"
ONKEYUP="var n = this.value.length;
this.value = this.value + this.oldValue.substring(n);
var range = this.createTextRange();
range.moveStart('character', n);
range.select();
this.oldValue = this.value;"
>
</FORM>
</BODY>
</HTML>
This code automatically puts a character in the input field value at the cursor position.
<HTML>
<HEAD>
<SCRIPT>
function checkKey (field) {
switch (field.value.length) {
case 0:
event.keyCode = '('.charCodeAt();
return true;
break;
case 1:
case 2:
case 3:
return /\d/.test(String.fromCharCode(event.keyCode));
break;
case 4:
event.keyCode = ')'.charCodeAt();
return true;
break;
case 5:
event.keyCode = ' '.charCodeAt();
return true;
break;
case 6:
case 7:
case 8:
return /\d/.test(String.fromCharCode(event.keyCode));
break;
case 9:
event.keyCode = '-'.charCodeAt();
return true;
break;
case 10:
case 11:
case 12:
case 13:
return /\d/.test(String.fromCharCode(event.keyCode));
break;
default:
return false;
break;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName">
<INPUT TYPE="text" NAME="fieldName" SIZE="14" MAXLENGTH="14"
ONKEYPRESS="return checkKey(this);"
>
</FORM>
</BODY>
</HTML>
Another piece of code puts a string in the input field value at the cursor position.
<HTML>
<HEAD>
<TITLE>Example</TITLE>
<SCRIPT>
function storeCaret (textEl)
{
if (textEl.createTextRange) textEl.caretPos =
document.selection.createRange().duplicate();
}
function insertAtCaret (textEl, text)
{
if (textEl.createTextRange && textEl.caretPos)
{
var caretPos = textEl.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
}
else
textEl.value = text;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<TEXTAREA NAME="content" COLS=40 ROWS=6
ONSELECT="storeCaret(this);"
ONCLICK="storeCaret(this);"
ONKEYUP="storeCaret(this);">Some example text</textarea>
<INPUT TYPE="button" STYLE="font-family:courier;" VALUE="-COOL-"
ONCLICK="insertAtCaret(this.form.content,'-COOL-');">
</FORM>
</BODY>
</HTML>
-
right, i think I've sorted it. I changed some of the code you posted...
[list=1][*]Changed so can now only add numbers[*]Changed so can now delete field (cant in example)[/list=1]
1 For dd/mm/yy
<html>
<head>
<title>Masked Date Textbox</title>
<script language="JavaScript" type="text/javascript">
<!--
function checkKey (field) {
switch (field.value.length) {
case 0:
return /\d/g.test(String.fromCharCode(event.keyCode));
break;
case 1:
return /\d/g.test(String.fromCharCode(event.keyCode));
break;
case 2:
if (event.keyCode != 8){ // If press delete remove /
event.keyCode = '/'.charCodeAt();
return true;
}
break;
case 3:
return /\d/g.test(String.fromCharCode(event.keyCode));
break;
case 4:
return /\d/g.test(String.fromCharCode(event.keyCode));
break;
case 5:
if (event.keyCode != 8){ // If press delete remove /
event.keyCode = '/'.charCodeAt();
return true;
}
break;
case 6:
return /\d/g.test(String.fromCharCode(event.keyCode));
break;
case 7:
return /\d/g.test(String.fromCharCode(event.keyCode));
break;
default:
return false;
break;
}
}
-->
</script>
</head>
<body>
<form name="formName">
<input type="text" name="fieldName" size="14" maxlength="8" onkeypress="return checkKey(this);">
</form>
</body>
</html>
2
<html>
<head>
<title>Masked Date Textbox</title>
<script language="JavaScript" type="text/javascript">
<!--
function checkKey (field) {
switch (field.value.length) {
case 0:
return /\d/g.test(String.fromCharCode(event.keyCode));
break;
case 1:
return /\d/g.test(String.fromCharCode(event.keyCode));
break;
case 2:
if (event.keyCode != 8){ // If press delete remove /
event.keyCode = '/'.charCodeAt();
return true;
}
break;
case 3:
return /\d/g.test(String.fromCharCode(event.keyCode));
break;
case 4:
return /\d/g.test(String.fromCharCode(event.keyCode));
break;
case 5:
if (event.keyCode != 8){ // If press delete remove /
event.keyCode = '/'.charCodeAt();
return true;
}
break;
case 6:
return /\d/g.test(String.fromCharCode(event.keyCode));
break;
case 7:
return /\d/g.test(String.fromCharCode(event.keyCode));
break;
case 8:
return /\d/g.test(String.fromCharCode(event.keyCode));
break;
case 9:
return /\d/g.test(String.fromCharCode(event.keyCode));
break;
default:
return false;
break;
}
}
-->
</script>
</head>
<body>
<form name="formName">
<input type="text" name="fieldName" size="14" maxlength="10" onkeypress="return checkKey(this);">
</form>
</body>
</html>
