1

我正在寻找一种方法将此解决方案应用于所有具有<input type="number">.

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

例子：

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

})
}

得到错误： 在此处输入图像描述

4

2 回答 2

3

使用属性选择器：

$('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
   }
);
于 2020-04-30T14:25:55.520 回答
2 
if($('input[type="number"]').length > 0){
    //do something like as $('input[type="number"]').each(function(index, element){ console.log(element); })
}
于 2020-04-30T14:33:10.883 回答