Question

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

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

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

我编写的代码仅适用于属性值，而不是手动检测＆＃34;启动函数前键入的值：

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中做到这一点？

这是我的小提琴：https://jsfiddle.net/Lau1989/Lytwyn8s/

感谢您的帮助

Answer 1

你需要像这样检查价值

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 link

如果您想在用户填写输入并再次点击时删除石灰背景，则可以添加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>

Answer 2

使用CSS选择器无法选择空输入（请参阅Matching an empty input box using 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";
    }
  }
}

querySelectorAll检测输入

2 个答案: