jQuery：使用 <input type="number"> 查找所有元素答案

【问题标题】：jQuery: find all elements with <input type="number">jQuery：使用 <input type="number"> 查找所有元素
【发布时间】：2020-04-30 14:23:32
【问题描述】：

我正在寻找一种将this 解决方案应用于所有具有<input type="number"> 的字段的方法。

到目前为止，我只看到了使用 jQuery 按 ID 查找元素然后附加输入过滤器的方法。但是，我想要实现的是将此类过滤器添加到具有“数字”类型的 all 元素中。

示例：

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

JS函数：

// 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));

将修饰符应用于特定元素

$(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
  });
});

更新： 我尝试了以下方法：

(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
  });

})
}

得到错误：

【问题讨论】：

标签： javascript html jquery findelement

【解决方案1】：

使用属性选择器：

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

按常规处理结果，但请注意inputFilter 已注册为 jQuery 扩展，并且未在 DOM 元素上定义：

// 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
   }
);

【讨论】：

好的，我尝试过的看起来很熟悉，该表达式的结果类型是什么？
匹配元素的集合 - 与使用 id 选择器相同。在后一种情况下，集合的长度为 1，但它是一个集合，您可以通过尝试对其应用 DOM API 方法轻松检查（这会产生错误）。
如何将“inputFilter”函数应用于所有这些元素？您能否将其添加到您的示例中？
不幸的是，我收到以下错误：(index):1319 Uncaught TypeError: element.inputFilter is not a function at HTMLInputElement.<anonymous> ((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 但是，代码正确识别了所有数字字段。
我已经用新方法和错误图像更新了我的问题。还是不明白为什么不能将新创建的函数应用到输入框。

【解决方案2】：

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

【讨论】：

jQuery 对象可以容忍选择器不匹配任何元素，因此if 不是必需的
一切正常 :D 如果没有 if，我认为控制台会显示警告。
我可以确认它没有。