javascript - 如何获取包含特定文本的输入标签的数量？

Question

我的目标是在用户在一个输入中输入与至少一个其他输入的文本相匹配的相同文本时进行标记。要选择所有相关输入，我有这个选择器:

$('input:text[name="employerId"]')

但是，例如，如何仅选择那些文本 = abc 的内容呢？

这是我的 change() 事件，用于检查页面上所有输入中的重复文本。我想我正在寻找类似 :contains 的内容，但要查找输入中的文本。

var inputsToMonitorSelector = "input[type='text'][name='employerId']";
$(inputsToMonitorSelector).change(function() {
    //console.log($(this).val());
    var inputsToExamineSelector = inputsToMonitorSelector 
        + ":contains('" + $(this).val() + "')";
    console.log(inputsToExamineSelector);

    if($(inputsToExamineSelector).length > 1) {
        alert('dupe!');
    }
});

或者没有这样的选择器？我是否必须以某种方式选择所有 inputsToMonitorSelector，并在一个函数中检查每个文本，增加一些局部变量直到它大于 1？

Answer 1

对于输入，您需要使用 [value="abc"]或.filter()

$(document).ready(function() {
var textInputSelector = 'input[type="text"][name="employerId"]';
  $(textInputSelector).on('input', function() {
    $(textInputSelector).css('background-color', '#fff');
    var input = $(this).val();
    var inputsWithInputValue = $(textInputSelector).filter(function() {
      return this.value && input && this.value == input;
    });
    var foundDupe = $(inputsWithInputValue).length > 1;
    if(foundDupe) {
      console.log("Dupe found: " + input);
      $(inputsWithInputValue).css('background-color', '#FFD4AA');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="employerId" value="abc">
<input type="text" name="employerId" value="">
<input type="text" name="employerId" value="">
<input type="text" name="employerId" value="">

• [value="abc"]表示如果值为 abc
• [value*="abc"] *表示该值是否包含 abc
• [value^="abc"] ^表示该值是否以 abc 开头
• [value$="abc"] $表示值是否以 abc 结尾

注意: :contains()不适用于输入，并且单词 text 不与输入一起使用和 <select> ..输入和<select>有一个值(value)

在你的情况下..而不是使用

$(inputsToExamineSelector).length > 1) 

您可能需要使用.filter()

$(inputsToExamineSelector).filter('[value*="abc"]').length > 1) 

或

$('input[type="text"][name="employerId"]').filter(function(){
    return this.value.indexOf('abc') > -1 
    // for exact value use >> return this.value == 'abc'
}).length;

要在其上使用变量，您可以像这样使用它

'[value*="'+ valueHere +'"]'