1

I am trying to put a restriction in my text boxes to enter only numbers, by adding event listener for each text boxes id having a pattern.

$(document).ready(function() {
  var numOnlyTextBoxes = 'input[id$="NumOnly"]';
  $(numOnlyTextBoxes).each(function() {
    alert(this.id);
    this.addEventListener("input", function(e) {
      var val = this.value,
        rx = /[^\d]/g;
      if (rx.test(val)) {
        var pos = this.selectionStart;
        this.value = val.replace(rx, "");
        this.selectionStart = pos;
        this.selectionEnd = pos - 1;
      }
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<INPUT id="firstNumOnly" TYPE="text" NAME="">
<INPUT id="secondNumOnly" TYPE="text" NAME="">
<INPUT id="thirdNumOnly" TYPE="text" NAME="">

I used this addEventListener approach to ensure it is validated in copy paste as well. First alert box is displayed and after that 2 more alerts are not coming. And all Text boxes are working as expected only when i launch IE developer tool. As specified in this link Why does JavaScript only work after opening developer tools in IE once? , i am not using any console and also i tried putting $.ajax({cache: false, ...}) in my code but even then it is not working. Browser: IE11 But a plain HTML or the JS fiddle working

I got error like .addEventListener is not supported, for that reason my onload function has below code as well

/* IE11 Fix for SP2010 */ 
                if (typeof(UserAgentInfo) != 'undefined' &amp;&amp; !window.addEventListener) 
                { 
                    UserAgentInfo.strBrowser=1; 
                }
Community
  • 1
  • 1
Pat
  • 535
  • 1
  • 16
  • 41
  • Which version of IE are you using? – JDB Mar 14 '17 at 19:25
  • I just tried your code in IE10 with no developer tools open, and it worked fine. – Barmar Mar 14 '17 at 19:31
  • You could've written it like this: https://jsfiddle.net/kcd3cde7/4/ – dokgu Mar 14 '17 at 19:31
  • Why aren't you using jQuery's methods for defining event listeners, e.g. $(numOnlyTextBoxes).on('input', function...)`? – Barmar Mar 14 '17 at 19:32
  • 1
    just fyi: the regex you specified replaces all parts which are no numbers (e.g. copy "a1b2" and strg+v results in "12". Is this what you intent to do? `/.*[^\d].*/gm` would match all strings (multiline) which do contain non-number values – r3bel Mar 14 '17 at 19:37
  • @JDB its IE11 browser – Pat Mar 14 '17 at 20:06
  • @Barmar, any other way of implementing this. I am expecting function which works on copy paste as well – Pat Mar 15 '17 at 03:36
  • @r3bel perfect, i dint notice that "a1b2" was copying as 12. Thanks, i updated regex. – Pat Mar 15 '17 at 03:37
  • @Pat Your code works for paste. – Barmar Mar 15 '17 at 14:07
  • @Barmar, i could not add class to the text boxes and use that in selector, because i need to make change in more places. So can we still use that id for selector? This is not working: https://jsfiddle.net/kcd3cde7/6/ – Pat Mar 15 '17 at 17:31
  • `$(this.id)` should be either `$(this)` or `$('#' + this.id)`. `$(this)` is generally better. But there's no need for `.each()`, you can use `$(numOnlyTextBoxes).on("input", ...)` – Barmar Mar 15 '17 at 18:57

0 Answers0