HTA - Validate Entry

user_10782801 0
Viewed 167

I am trying to prevent the user entering non-numeric characters into an input field. However, the user can still type these in... What am I missing??

<input type="number" size="5" id="ActionNo" min="3" max="10" step="1" pattern="^[0-9]{0,2}$" title="Numbers only, please." maxLength="2" />

The error message also does not pop up when invalid characters are input

Do I have to write a function when a user inputs a character to check that it is valid. If I have to do how do I stop the input box loosing focus?

I am using VBScript as the language for this HTA

hta vbscript html
2 Answers

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>
user_157643780

Microsoft HTA (mshta.exe) is a proprietary technology based around the Internet Explorer 9 engine which will predate most standards compliant HTML5 features.

Microsoft internet browsers have been notorious for not being standards compliant in the past but that all changed with the arrival of the new Edge browser based on the Chromium project (not to be mistaken with the first iteration of Microsoft Edge, which was again a proprietary attempt that Microsoft eventually ditched).

As MSHTA is based on the old browser engine newer features such as HTML5 will not be supported by default. There are "shims" or "polyfills" (scripts that can add or extend missing features but mainly for JScript) but you will not get full support for modern browser techniques in the old IE engine.

user_6929420
Related