Input type number
is not properly supported in any version of MSHTML, so another approach is required.
One simple solution is to use a dropdown menu with values from 3-10.
Another solution is to filter the input with a script, as shown in the examples below.
Example 1 (using IE 7
document mode):
This version filters non-numeric characters after they are displayed, so non-numeric characters "flash".
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=7">
<script language="VBScript">
Sub Filter
UserInput = ActionNo.Value
Set re = New RegExp
re.Pattern = "[\D]"
ActionNo.Value = re.Replace(UserInput,"")
End Sub
Sub Validate
If ActionNo.Value<3 Or ActionNo.Value>10 Then
ActionNo.Value = ""
FocusHelper.Focus
End If
End Sub
</script>
<style>
#FocusHelper {border:none; outline:none; border-color:transparent}
</style>
</head>
<body>
<input type="text" size="5" id="ActionNo" MaxLength="2" OnKeyUp="Filter" OnChange="Validate">
<input type="text" size="1" id="FocusHepler" OnFocus="ActionNo.Focus">
</body>
</html>
Example 2 (using IE 9
document mode):
This better version uses OnInput
, so the non-numeric characters are completely filtered out.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=9">
<script language="VBScript">
Sub Filter
UserInput = ActionNo.Value
Set re = New RegExp
re.Pattern = "[\D]"
ActionNo.Value = re.Replace(UserInput,"")
End Sub
Sub Validate
If ActionNo.Value<3 Or ActionNo.Value>10 Then
ActionNo.Value = ""
FocusHelper.Focus
End If
End Sub
Sub ReFocus
ActionNo.Focus
End Sub
</script>
<style>
#FocusHelper {border:none; outline:none; border-color:transparent}
</style>
</head>
<body>
<input type="text" size="5" id="ActionNo" MaxLength="2" OnInput="Filter()" OnChange="Validate()">
<input type="text" size="1" id="FocusHepler" OnFocus="ReFocus()">
</body>
</html>