jQuery：找到所有元素<input type="“number”">

Question

我正在尋找一種方法將此解決方案應用於所有具有<input type="number">的字段。

到目前為止，我只看到了使用 jQuery 按 ID 查找元素然后附加輸入過濾器的方法。 但是，我想要實現的是將這樣的過濾器添加到具有“數字”類型的所有元素中。

例子：

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

將修飾符應用於特定元素

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

})
}

得到錯誤：

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

Answer 2

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

jQuery：找到所有元素<input type="“number”">

問題描述

2 個解決方案

解決方案1
3 已采納 2020-04-30 14:25:55

解決方案2
2 2020-04-30 14:33:10

jQuery：找到所有元素<input type="“number”">

問題描述

2 個解決方案

解決方案1 3 已采納 2020-04-30 14:25:55

解決方案2 2 2020-04-30 14:33:10

解決方案1
3 已采納 2020-04-30 14:25:55

解決方案2
2 2020-04-30 14:33:10