JavaScript -使用纯JS选择所有非内联输入文本框元素

icomxhvb 于 2023-06-28 发布在 Java

关注(0)|答案(3)|浏览(78)

我在一个页面上有几个输入元素。有两个radio按钮和三个text box元素。我只对在自己行上的文本框元素感兴趣，换句话说，就是不内联的。另外，我说的不是文本框元素，不是文本元素。因为我应该能够选择input[type=text]和input[type=number]字段。
这必须是一个纯JavaScript解决方案，所以CSS和jQuery将无法工作。
查看HTML，可以清楚地看到内联<input>标记前面是<label>标记。因此，一个想法是找到所有输入元素，将它们转换为数组，并在该数组中搜索没有标签标记的项目。
这段代码不起作用，但即使它起作用了，也应该有一个更简单的方法来找到它。

let selectedTextBoxes = Array.from(document.querySelectorAll('input[type=text], input[type=number]'))
                             .filter(i => i.previousElementSibling.tagName != 'label');

selectedTextBoxes.forEach(textBox => { textBox.classList.add('highlight') });

.highlight { background: gold; }

<h2>Select an Option</h2>

<div class="label-group">
  <label>A</label>
  <input type="radio"></input>
</div>
<div class="label-group">
  <label>B</label>
  <input type="radio"></input>
</div>
<div class="label-group">
  <label>Other</label>
  <input type="text"></input>
</div>

<h3>Now type in a number between 1 and 99</h3>
<input type="number"></input>
<h3>Type in a comment</h3>
<input type="text"></input>

JavaScript

来源：https://stackoverflow.com/questions/76518803/javascript-selecting-all-non-inline-input-text-box-elements-using-pure-js

3条答案

按热度按时间

olqngx591#

纯JavaScript .querySelectorAll使用CSS selectors，这是强大的。这是做这项工作的工具。
在您的特定情况下，下面选择前面没有<label>元素但不使用该特定逻辑的<input>元素。

document.querySelectorAll("body > input").forEach(function(input){input.classList.add("highlight")});

.highlight {
 background: yellow;
}

<h2>Select an Option</h2>

<div class="label-group">
  <label>A</label>
  <input type="radio"></input>
</div>
<div class="label-group">
  <label>B</label>
  <input type="radio"></input>
</div>
<div class="label-group">
  <label>Other</label>
  <input type="text"></input>
</div>

<h3>Now type in a number between 1 and 99</h3>
<input type="number"></input>
<h3>Type in a comment</h3>
<input type="text"></input>

赞(0）回复(0）举报 2023-06-28

ljo96ir52#

如果需要选择前面没有label元素的输入元素，可以将:not()与sibling combinator结合使用。

form :not(label)~input {
  background: gold;
}

<h2>Select an Option</h2>
<form name="form01">
  <div class="label-group">
    <label>A</label>
    <input type="radio">
  </div>
  <div class="label-group">
    <label>B</label>
    <input type="radio">
  </div>
  <div class="label-group">
    <label>Other</label>
    <input type="text">
  </div>

  <h3>Now type in a number between 1 and 99</h3>
  <input type="number">
  <h3>Type in a comment</h3>
  <input type="text">
</form>

这个CSS选择器也可以在querySelectorAll（）方法中使用：

let elements = document.querySelectorAll('form :not(label)~input');
console.log([...elements].map(elm => elm.name).join(','));

form :not(label)~input {
  background: gold;
}

<h2>Select an Option</h2>
<form name="form01">
  <div class="label-group">
    <label>A</label>
    <input name="radio01" type="radio">
  </div>
  <div class="label-group">
    <label>B</label>
    <input name="radio01" type="radio">
  </div>
  <div class="label-group">
    <label>Other</label>
    <input name="text01" type="text">
  </div>

  <h3>Now type in a number between 1 and 99</h3>
  <input name="number01" type="number">
  <h3>Type in a comment</h3>
  <input name="text02" type="text">
</form>

赞(0）回复(0）举报 2023-06-28

fhity93d3#

<input>没有结束标签，默认情况下是inline-block，除非您更改其CSS属性display值。至于CSS和jQuery不工作是一个奇怪的假设，因为CSS确定<input>是否是inline，而jQuery是基于JavaScript的。
因此，示例A是这个问题的解决方案：

“使用普通JavaScript，我如何才能只针对<input>和type="text"或"number"，并且只有当它们前面没有<label>时？“*
示例B是此问题的解决方案：
“使用普通JavaScript，我如何只针对不在div.label-group内的<input> s？“*

这两种解决方案导致相同的结果，即最后两个<input>被突出显示。

实施例A

document.querySelectorAll("input").forEach(input => {
  if (!input.type || input.type === "text" || input.type === "number") {
    if (!input.previousElementSibling.matches("label")) {
      input.classList.add("highlight");
    }
  }
});

.highlight {
  background: yellow;
}

<h2>Select an Option</h2>

<div class="label-group">
  <label>A</label>
  <input type="radio">
</div>
<div class="label-group">
  <label>B</label>
  <input type="radio">
</div>
<div class="label-group">
  <label>Other</label>
  <input type="text">
</div>

<h3>Now type in a number between 1 and 99</h3>
<input type="number">
<h3>Type in a comment</h3>
<input type="text">

实施例B

document.querySelectorAll("input").forEach(input => {
  if (!input.parentElement.matches(".label-group")) {
    input.classList.add("highlight");
  }
});

.highlight {
  background: yellow;
}

<h2>Select an Option</h2>

<div class="label-group">
  <label>A</label>
  <input type="radio">
</div>
<div class="label-group">
  <label>B</label>
  <input type="radio">
</div>
<div class="label-group">
  <label>Other</label>
  <input type="text">
</div>

<h3>Now type in a number between 1 and 99</h3>
<input type="number">
<h3>Type in a comment</h3>
<input type="text">

赞(0）回复(0）举报 2023-06-28

我来回答

JavaScript -使用纯JS选择所有非内联输入文本框元素

3条答案

相关问题

热门标签

最新问答