Question

简单的 JS 来改变字段颜色

2020-01-20

431

javascript html css

我有一个表单，其中有几个必填字段，还有许多非必填字段。我希望必填字段在被点击之前为淡粉色，然后恢复为所有字段的默认颜色。我还没有真正尝试过任何东西，因为我不确定如何制定它。我为具有 rgba 颜色值的字段创建了一个不同的类。我发现的一个例子确实有 addClass，但我需要更改的字段已经有一个类来定义它们的宽度、轮廓等。addClass 会更改现有的类吗，或者是否有“changeClass”功能或类似的东西？我试图修改这里的答案：使用 Javascript 更改类值，以便在单击字段时工作，但这不起作用。我也尝试使用 document.querySelectorAll，因为我有多个字段被其他非必填字段分隔开，我不希望它们都具有相同的 ID 或位于相同的 div 中。

我尝试了

function changeClass(){
  document.getElementByClass(".reqd").className = "ssmall4";
}

或

function changeClass(){
  document.querySelectorAll(".reqd").className = "ssmall4";
}

和

<input onClick="changeClass()" type="number" id="certYear" name="certYear"value="2020" class ="reqd">

有人能帮我把这些点连接起来吗？

我现在可以使用以下方法让它在一个字段上工作：

`<label for="certYear">Certification Year:
<br>      
  </label>
  <input type="number" id="certYear" name="certYear"value="2020" 
onclick="myFunction()" class="reqd">`

和

 `function myFunction() {
  document.getElementById('certYear').style.backgroundColor = "white";
}`

但是，如果我将函数更改为 document.getElementsByClassName，我会得到 “未捕获的 TypeError：无法设置未定义的属性‘backgroundColor’” 如果我尝试使用 document.querySelectorAll，情况也是如此（我假设在这个例子中是因为我必须定义一个变量，我不知道除了上述方法之外如何实现 bg 样式颜色更改）

我想我可以复制该函数 10 次，每个字段一次，然后重命名该函数并更改 id，但这似乎不太雅致。

Answer 1

您可以使用纯 CSS 实现您想要的效果：

.reqd {
    background: pink;
}

.reqd:active {
    background: white;
}

替换为适当的颜色，如果需要，您可以只定位背景颜色，但本质上，如果您所寻找的只是粉红色的文本字段，当它们被点击时（“活动”）显示为白色，那么这应该可以做到。

Answer 2

实际上，您无需上课就可以做到这一点。

您的意思是这样的吗？

const reqInp = document.querySelectorAll('input[required]'); // same as css selector
const allInp = document.querySelectorAll('input[type="text"]'); // all inputs
for (var i=0; i < reqInp.length; i++) { // iterate the required ones
  reqInp[i].addEventListener('focus', function() { // if one of them has focus on it
    allInp.forEach(function(element){  element.style.background = 'pink'; }) // color all input to pink (or whatever you want)
    this.style.background = 'white'; // except this
  });
// edit:
  reqInp[i].addEventListener('blur', function() { // if one of them loose focus
    allInp.forEach(function(element){  element.removeAttribute('style'); }) // remove style attribute so it will return to intial state
  });
}

input {display: block; width: 100%;}
input[required] {background: pink;}https://stackoverflow.com/questions/59831874/simple-js-to-change-field-color-when-changed/59832111#

<input type="text" />
<input type="text" />
<input type="text" placeholder="required" required />
<input type="text" placeholder="required" required />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" placeholder="required" required />
<input type="text" placeholder="required" required />
<input type="text" />
<input type="text" />
<input type="text" />