jQuery: find all elements with

Question

I'm looking to a way to apply this solution to all of the fields which have <input type="number">.

So far I've only seen the way to find element by ID using jQuery and then attach an input filter. However, what I'm trying to achieve is to add such filter to all elements with the "numeric" type.

Example:

<html>
<body>
    <div>
        <input type="number">
    </div>                              
</body>
</html>

JS Function:

// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

Application of the modifier to a particular element

$(document).ready(function() {
  $("#myTextBox").inputFilter(function(value) { // I need to find ALL elements with input type = number here instead of just myTextBox
    return /^\d*$/.test(value);    // Allow digits only, using a RegExp
  });
});

Update: I tried the following:

(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

if($('input[type="number"]').length > 0){
$('input[type="number"]').each(function(index, element){ console.log(element); // Successfully logs the element!
element.inputFilter(function(value) { // I need to find ALL elements with input type = number here instead of just myTextBox
    return /^\d*$/.test(value);    // Allow digits only, using a RegExp
  });

})
}

Getting the error:

collapsar · Accepted Answer · 2020-04-30T15:12:39.837

3

Use an attribute selector:

$('input[type="number"]')...

Process the result als usual but beware that inputFilter is registered as a jQuery extension and is not defined on DOM elements:

// Iterate over the matched elements. 'element' values are DOM elements and thus oblivious to jquery. For this reason you cannot call `inputFilter` on them.
$('input[type="number"]').each( function(index, element){ 
    console.log(element); // Successfully logs the element!
}

// Untested code (jQuery should handle the overhead of iterating over the elements.)
$('input[type="number"]').inputFilter(
   function(value) { // I need to find ALL elements with input type = number here instead of just myTextBox
      return /^\d*$/.test(value);    // Allow digits only, using a RegExp
   }
);

edited Apr 30 '20 at 15:12

answered Apr 30 '20 at 14:25

collapsar

17,010
4
35
61

Ok, that looks familiar to what I've tried, what would be the resulting type of that expression? – Richard Topchii Apr 30 '20 at 14:29
A collection of matched elements - the same as in using the id selector. In the latter case the collection has length of 1, but a collection it is, which you can easily check by trying to apply a DOM API method on it (which produces an error). – collapsar Apr 30 '20 at 14:32
How can I apply the "inputFilter" function to all of those elements? Could you please add it to your example? – Richard Topchii Apr 30 '20 at 14:55
Unfortunately, I'm getting the following error: `(index):1319 Uncaught TypeError: element.inputFilter is not a function at HTMLInputElement. ((index):1319) at Function.each (jquery-2.1.3.js:374) at jQuery.fn.init.each (jquery-2.1.3.js:139) at (index):1318` However, the code correctly identifies all of the number fields. – Richard Topchii Apr 30 '20 at 15:00
I've updated my question with the new approach and an image of the error. Still I don't understand why I can't apply the newly created function to the input box. – Richard Topchii Apr 30 '20 at 15:04
Thanks for updating your answer! Your code works perfectly in the JSFiddle, although it doesn't work in the iOS WebView. I suspect, some other JS hooks in the app might interfere with the code, for some reason, the value is always empty. – Richard Topchii May 04 '20 at 07:04

score 2 · Answer 2 · answered Apr 30 '20 at 14:33

2

if($('input[type="number"]').length > 0){
    //do something like as $('input[type="number"]').each(function(index, element){ console.log(element); })
}

answered Apr 30 '20 at 14:33

Bao Nam

69
4

jQuery objects are tolerant of selectors matching no elements so the `if` is not necessary – Rory McCrossan Apr 30 '20 at 14:36
Everything is ok :D If not have **if**, i think console will show warning. – Bao Nam Apr 30 '20 at 14:39
I can confirm it doesn't. – Rory McCrossan Apr 30 '20 at 14:42

jQuery: find all elements with

2 Answers2