Javascript working in Chrome but not in IE

Question

I'm new to javascript. I have an input box that only accepts numbers. If someone copy-paste on that input, it should trim all the non numeric characters. The input field should only be max 10 characters.

Here is the code. It is working in Chrome but not in IE. Can someone figure out what is wrong?

<!DOCTYPE html>
<html>
<body>

<input type="text" maxlength="10" title="Number" pattern="[0-9]*" onkeypress='validate(event)' onpaste="strip(this, event)"/>

<p id="demo"></p>

<script>
        function strip(obj, evt) {
            var theEvent = evt || window.event;
            obj.value = theEvent.clipboardData.getData('Text').replace(/\D/g, '');
obj.value = obj.value.substring(0,Math.min(10,obj.value.length));
            theEvent.returnValue = false;
        }

        function validate(evt) {
            var theEvent = evt || window.event;
            var key = theEvent.keyCode || theEvent.which;
            key = String.fromCharCode(key);
            var regex = /[0-9]/;
            if (!regex.test(key)) {
                theEvent.returnValue = false;
                if (theEvent.preventDefault) theEvent.preventDefault();
            }
        }
</script>

</body>
</html>

Chrome Version - Version 40.0.2214.115 m IE Version - 9.0.8

onpaste is a non-standard on not recommended for use. developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste. This is straight from MDN: Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. — Jeff
– Jeff, Commented Mar 4, 2015 at 15:05
@Jeff You should make your comment an answer so I can vote on it. :) — Brett
– Brett, Commented Mar 4, 2015 at 15:10

Tom · Accepted Answer · 2015-03-04 15:27:31Z

1

replacing your strip function with the following works:

function strip(input, evt) {
    var clipboardData = window.clipboardData ? window.clipboardData : evt.clipboardData;
    var theEvent = evt || window.event;
    var text = clipboardData.getData('Text');
    var processedText = text.replace(/\D/g, '').substring(0, Math.min(10, text.length));
    input.value = processedText;
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
}

answered Mar 4, 2015 at 15:27

Tom

4,1602 gold badges26 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

racumin Over a year ago

I just tested this on Firefox 25.0 and the backspace, delete, home and end keys do not work. Any ideas?

Nejc Rodošek · Accepted Answer · 2015-03-04 15:22:35Z

0

You are using attribute pattern which is new attribute in HTML5 and is not supported by IE below version 10.

answered Mar 4, 2015 at 15:22

Nejc Rodošek

1632 silver badges11 bronze badges

Comments

Ferdi · Accepted Answer · 2015-03-04 15:24:28Z

You could use a input with type number instead to prevent insertion of characters other than numbers. However this input type is relatively new and will not work on some older browsers.

Small example:

<form>This will allow anything.
<input type="text">
<br />This will allow only numbers.
<input type="number">
<br />Try typing in letters in the bottom box and pressing send.
<br />
<input type="submit">

http://jsfiddle.net/yqdsaf3t/

http://caniuse.com/#feat=input-number

Collectives™ on Stack Overflow

Javascript working in Chrome but not in IE

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related