querySelectorAll检测输入框中的值

Question

我有多个输入框，我想根据用户是否在其中输入值来进行区分。

<input type="text" class="foo"> <br/>
<input type="text" class="foo" value = "D"> <br/>
//and so on.. 

<button onclick="calculate()">Hightlight</button>

我编写的代码仅适用于属性值，而无法在启动函数之前检测“手动”键入的值：

function calculate() {

  var allinputs = document.querySelectorAll('input[value][type="text"]:not([value=""])');
  var myLength = allinputs.length;

  for (var i = 0; i < myLength; ++i) {
    allinputs[i].style.backgroundColor = "lime";

  }
}

我只想检测用户在提交时通过高亮按钮键入的输入内容。有没有一种使用纯JavaScript实现的方法？

这是我的fiddle链接：https://jsfiddle.net/Lau1989/Lytwyn8s/ 感谢您的帮助。

- Lau

Answer 1

使用CSS选择器无法选择空输入（请参见使用CSS匹配空输入框），但是您可以在应用样式之前测试值的长度以实现所需效果：

function calculate() {
  var allinputs = document.querySelectorAll('input[type="text"]');
  var myLength = allinputs.length;
  var input;

  for (var i = 0; i < myLength; ++i) {
    input = allinputs[i];
    if (input.value) {
        input.style.backgroundColor = "lime";
    }
  }
}

- iblamefish

---

谢谢。你的解决方案在我输入空白属性值的输入框（如<input value ="">）时有效，但当我在没有value属性的输入框中输入内容时仍然无效。我可以将所有输入框的属性值设置为空白，但我相信有更优雅的方法来解决这个问题。再次感谢你的帮助。 - Lau

@Lau的答案已更新-从querySelectoAll中删除了[value]，因此现在它将选择所有文本输入。 - iblamefish

Answer 2

您需要检查像这样的值。

function calculate() {
  var allinputs = document.querySelectorAll('input[type="text"]');
  var myLength = allinputs.length;

  for (var i = 0; i < myLength; ++i) {
    if (allinputs[i].value == '') {
      allinputs[i].style.backgroundColor = "lime";
    }
  }
}

<input type="text" class="foo">
<br/>
<input type="text" class="foo" value="D">
<br/>
<input type="text" class="foo" value="G">

<button onclick="calculate()">Hightlight</button>

<br/>
<br/>
<div id="output"></div>

另请参见 JsFiddle链接

如果您希望在用户填写输入并再次单击时删除酸橙色背景，可以添加else语句。

function calculate() {
  var allinputs = document.querySelectorAll('input[type="text"]');
  var myLength = allinputs.length;
  for (var i = 0; i < myLength; ++i) {
    if (allinputs[i].value == '') {
      allinputs[i].style.backgroundColor = "lime";
    }else {
     allinputs[i].style.backgroundColor = "white";
        //allinputs[i].removeAttribute("style") or that
    }
  }
}

<input type="text" class="foo">
<br/>
<input type="text" class="foo" value="D">
<br/>
<input type="text" class="foo" value="G">

<button onclick="calculate()">Hightlight</button>

<br/>
<br/>
<div id="output"></div>

更新

你需要那个。

function calculate() {
  var allinputs = document.querySelectorAll('input[type="text"]');
  var myLength = allinputs.length;
  for (var i = 0; i < myLength; ++i) {
    if (!allinputs[i].hasAttribute("value")) {
        if(allinputs[i].value !== '') {
       allinputs[i].style.backgroundColor = "lime";
      }else {
        allinputs[i].removeAttribute("style");
      }
    }
  }
}

<input type="text" class="foo">
<br/>
<input type="text" class="foo" value="D">
<br/>
<input type="text" class="foo" value="G">

<button onclick="calculate()">Hightlight</button>

<br/>
<br/>
<div id="output"></div>

- Narek-T

---

谢谢您的帮助，尽管我不是在尝试选择空输入，而是只选择用户键入了内容但没有值属性的输入。 - Lau