narmi2
asked on
input box mask help
Hi
can anyone help me with the following input box mask. currently the mask works if the user types in a date. it should not allow them to click any button other then number keys. i dont want a message to popup if they click a button other then a number key, it should just do nothing.
<html>
<head>
<script language="javascript">
function mask(str,textbox,loc,delim ){
var locs = loc.split(',');
for (var i = 0; i <= locs.length; i++){
for (var k = 0; k <= str.length; k++){
if (k == locs[i]){
if (str.substring(k, k+1) != delim){
str = str.substring(0,k) + delim + str.substring(k,str.length )
}
}
}
}
textbox.value = str
}
</script>
<title>Input Mask : : Javascript</title>
</head>
<body>
<form name="form" action="" method="post">
<table>
<tr>
<td>Field1:</td>
<td><input name="Field1" value="" type="text" onKeyUp="javascript:return mask(this.value,this,'3,6' ,'-');" onBlur="javascript:return mask(this.value,this,'3,6' ,'-');" style="font-family:verdana ;font-size :10pt;widt h:110px;" maxlength="11"></td>
</tr>
<tr>
<td>Field2:</td>
<td><input name="Field2" value="" type="text" onKeyUp="javascript:return mask(this.value,this,'2,5' ,'/');" onBlur="javascript:return mask(this.value,this,'2,5' ,'/');" style="font-family:verdana ;font-size :10pt;widt h:110px;" maxlength="10"></td>
</tr>
<tr>
<td>Field3:</td>
<td><input name="Field3" value="" type="text" onKeyUp="javascript:return mask(this.value,this,'2,5' ,'-');" onBlur="javascript:return mask(this.value,this,'2,5' ,'-');" style="font-family:verdana ;font-size :10pt;widt h:110px;" maxlength="10"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="submit">
</td>
</tr>
</table>
</form>
</body>
</html>
but this does not stop the user from entering characters. it should only allow them to enter numbers. and also it needs leave a space after the date and then allow them to enter the time e.g. dd/mm/yy hh:mm
anyone got any ideas?
thanks
can anyone help me with the following input box mask. currently the mask works if the user types in a date. it should not allow them to click any button other then number keys. i dont want a message to popup if they click a button other then a number key, it should just do nothing.
<html>
<head>
<script language="javascript">
function mask(str,textbox,loc,delim
var locs = loc.split(',');
for (var i = 0; i <= locs.length; i++){
for (var k = 0; k <= str.length; k++){
if (k == locs[i]){
if (str.substring(k, k+1) != delim){
str = str.substring(0,k) + delim + str.substring(k,str.length
}
}
}
}
textbox.value = str
}
</script>
<title>Input Mask : : Javascript</title>
</head>
<body>
<form name="form" action="" method="post">
<table>
<tr>
<td>Field1:</td>
<td><input name="Field1" value="" type="text" onKeyUp="javascript:return
</tr>
<tr>
<td>Field2:</td>
<td><input name="Field2" value="" type="text" onKeyUp="javascript:return
</tr>
<tr>
<td>Field3:</td>
<td><input name="Field3" value="" type="text" onKeyUp="javascript:return
</tr>
<tr>
<td colspan="2">
<input type="submit" value="submit">
</td>
</tr>
</table>
</form>
</body>
</html>
but this does not stop the user from entering characters. it should only allow them to enter numbers. and also it needs leave a space after the date and then allow them to enter the time e.g. dd/mm/yy hh:mm
anyone got any ideas?
thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<html>
<head>
<script language="javascript">
function mask(str,textbox,loc,delim
str = str.replace(/[^\d\/\s:]/,'
textbox.value = str
}
</script>
<title>Input Mask : : Javascript</title>
</head>
<body>
<form name="form" action="" method="post">
<table>
<tr>
<td>Field1:</td>
<td><input name="Field1" value="" type="text" onKeyUp="javascript:return
</tr>
<tr>
<td>Field2:</td>
<td><input name="Field2" value="" type="text" onKeyUp="javascript:return
</tr>
<tr>
<td>Field3:</td>
<td><input name="Field3" value="" type="text" onKeyUp="javascript:return
</tr>
<tr>
<td colspan="2">
<input type="submit" value="submit">
</td>
</tr>
</table>
</form>
</body>
</html>