javascript - querySelectorAll detecting value in input - Stack Overflow

admin管理员组

文章数量:1296485

I have multiple inputs I want to discriminate according to whether the user enters a value in it or not.

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

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

The code I wrote only works with attribute values, instead of detecting "manually" typed values before launching the function :

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

  }
}

I only want to detect the inputs in which the user typed something when he submits it through the highlight button. Is there a way to do it in pure javascript ?

Here is my fiddle : /

Thanks for your help

I have multiple inputs I want to discriminate according to whether the user enters a value in it or not.

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

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

The code I wrote only works with attribute values, instead of detecting "manually" typed values before launching the function :

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

  }
}

I only want to detect the inputs in which the user typed something when he submits it through the highlight button. Is there a way to do it in pure javascript ?

Here is my fiddle : https://jsfiddle/Lau1989/Lytwyn8s/

Thanks for your help

• javascript
• input
• selectors-api

Share Improve this question Follow asked Oct 7, 2016 at 8:19 LauLau 17922 gold badges44 silver badges1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

It's not possible to select empty inputs using CSS selectors (see Matching an empty input box using CSS), but you can achieve what you want by testing the length of the value before applying the style:

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

You need to check value like this

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>

See also JsFiddle link

And if you want to remove lime background when user fills input and clicks again you can add else statement.

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>

UPDATE

You need that

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>

本文标签： javascriptquerySelectorAll detecting value in inputStack Overflow