Stop IE11 removing text from input type number

Question

In Internet Explorer 11, if you have the following:

<input type="number" min="1" max="12" pattern="[0-9]*" > 

When a user tries to enter letters, not numbers, the browser simply clears the input. This behavior is undesirable since I want our check to handle this, and not the browser that automatically does this for me.

Does anyone know how to change this behavior?

I use the number input type for verification, as well as for getting the correct keyboard in iOS.

JSFiddle demo .

Answer 1

Other browsers may contain this text, however, entering "aaa" in an input element whose type attribute is set to "number" means that your value property is empty, so your verification method will most likely regard this as a lack of content and not as numerical value.

 <input type="number" value="aaa" /> 

 console.log(document.querySelector('input').value); > "" 

I modified your JSFiddle demo to reflect this: http://jsfiddle.net/e1132tg5/3/ .

If you need to accept non-numeric data in an input element, then the solution will simply change your type element to “text” instead of “number” and rely solely on your own JavaScript validation methods to handle validation (you think you don't care).

 <input type="text" > 

You can always use your JavaScript to determine if a user is browsing your site on a mobile device and dynamically changing the type attribute.

An alternative solution would be to inform the user that the field should be numerical if the element is blurred without the presence of text (after IE is automatically deleted), but this would be better discussed on the SE UserExperience Website .

Answer 2

Just use regex:

 <input type="text" name="amount" id="amount" data-val="true" data-val-required="Amount field cannot be empty." data-val-regex-pattern="^[0-9+.\s]*$" data-val-regex="Amount field must be numeric" placeholder="Amount"> <span class="field-validation-valid" data-valmsg-for="amount" data-valmsg-replace="true"></span>