Masked Edit Input - Revisited
Hi,
My other post got too long. Ok, here's what I ended up with. It only took me all day to get it to work.
As you input something, the selection moves to the next position in the input box, skipping over the "/"'.
My next task is to make this work for additional input fields on the page. There will be up to 4 date and 4 time fields. The selection should automatically move to the next field when the previous field is filled. I Also want to limit the inputs to numbers only.
Any help will be greatly appreciated.
Code:
<html>
<head>
<script language="javascript">
function setCaretToBegin (input) {
selectionStart=0;
selectionEnd=1;
setSelectionRange(input, selectionStart, selectionEnd);
}
function setSelectionRange(input) {
switch (selectionStart) {
case 2:
selectionStart++;
selectionEnd++;
break;
case 5:
selectionStart++;
selectionEnd++;
break;
}
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
selectionStart++;
selectionEnd++;
range.select();
}
</script>
</head>
<body onload="setCaretToBegin(formName.ArrivalDate);">
<form name="formName">
<input name="ArrivalDate"
type="text"
size="8"
maxlength="8"
value="__/__/__"
onkeyup="setSelectionRange(this.form.ArrivalDate);">
</form>
</body>
</html>
