2

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

user692942
  • 16,398
  • 7
  • 76
  • 175
  • You are trying to use features of HTML5 that MSHTA will not understand because it is based on the IE9 engine which is very much not a standard browser engine by todays standards. – user692942 Jul 13 '21 at 05:55

2 Answers2

2

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>
LesFerch
  • 1,540
  • 2
  • 5
  • 21
  • Bit of misinformation here, but a valid attempt. The IE9 compatibility mode is compatible with `HTA:APPLICATION` that’s the whole point of it, the `MSHTA.exe` engine is entirely built on the IE9 engine. – user692942 Jul 17 '21 at 10:50
  • Thank you for the correction. I forgot that it's ie=10 and above that don't support HTA:APPLICATION. Answer has been revised. – LesFerch Jul 17 '21 at 14:18
1

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.


user692942
  • 16,398
  • 7
  • 76
  • 175
  • Thank you for this explanation. Much appreciated. I ended up writing a validation routine to handle this issue. The only attribute that worked was the maxlength, even the size attribute does not seem to work as you cannot reduce the input field to that size..But this is not really an issue. I know have to find a way to show that the field is in error rather than having a pop-up... Is there a way to prevent one tabbing out of an error field?? That is to say keep the focus within the input field with the error?? – Jason Hudson Jul 15 '21 at 02:14
  • Use an event handler like `onkeypress="functionhere"` in your `input` tag then write the VBScript `functionhere` to [handle the keypress event](https://stackoverflow.com/a/16212858/692942). – user692942 Jul 15 '21 at 07:14