如何将 onfocus 事件侦听器添加到输入字段以更改标签的样式答案

【问题标题】：How to add onfocus event listener to input field to change the style of the labels如何将 onfocus 事件侦听器添加到输入字段以更改标签的样式
【发布时间】：2020-02-17 00:48:36
【问题描述】：

当我在输入字段上使用onfocus 时，我试图将我的输入标签样式更改为.fancyclass 样式。我想知道如何在 Javascript 中使用事件侦听器来做到这一点？

            <fieldset name="in-fields">

                <section>
                    <label for ="inputname" class="name">Name*</label>
                    First: <br><input type="text" name="info" required><br/>
                    Last: <br><input type="text" name="info" required><br/>
                </section>

                <section>
                    <label for="inputnumber" class ="name">Phone Number*</label>
                    <input type="text" name="info" required>
                </section>

                <section>
                    <label for="inputemploy" class ="name">Current Employer</label>
                    <input type="text" name="info">
                </section>

                <section>
                    <label for="inputemail" class= "name">Email*</label>
                    <input type="email" name="info" required>  
                </section>

           </fieldset>

           .fancyclass {
           font-weight:bold;
           text-transform:uppercase;
           }

        document.querySelectorAll('input[name="info"]').forEach(item=> {
            item.addEventListener('focus', event => {
            console.log("add fancy class");
            })
        })

这是我目前所拥有的......我很确定这是错误的。当我专注于输入字段时，我不知道如何将花哨的类添加到标签中。

【问题讨论】：

你试过什么。您应该发布或至少提及您尝试过的所有 javascript 解决方案。
@DanielTate 我编辑了我的帖子并添加了到目前为止的内容。希望你能帮忙谢谢:)
除了单选按钮，输入名称必须不同。名称值用于识别验证表单上的输入值和发送数据

标签： javascript html forms events dom-events

【解决方案1】：

不要忘记删除你喜欢的模糊类

const myForm     = document.getElementById('my-form')
  ,   All_Labels = myForm['in-fields'].querySelectorAll('label')
  ;
myForm['in-fields'].querySelectorAll('input').forEach(inElm=>
  {
  inElm.onfocus=focusOn;
  inElm.onblur=focusOff;
  })
function focusOn(e)
  {
  let label_elm = e.target.parentNode.querySelector('label')
  All_Labels.forEach(lbl=>
    {
    if (lbl===label_elm)  { lbl.classList.add('fancyclass')    }
    else                  { lbl.classList.remove('fancyclass') }
    })
  }
function focusOff(e)
  {
  All_Labels.forEach(lbl=> lbl.classList.remove('fancyclass') ) 
  }

.fancyclass {
  font-weight:bold;
  text-transform:uppercase;
}

<form id="my-form">
  <fieldset name="in-fields">
    <section>
      <label class="name">Name*</label><br>
      First: <br><input type="text" name="First-Name" required><br>
      Last:  <br><input type="text" name="Last-Name"  required><br>
    </section>

    <section>
      <label class="name">Phone Number*</label>
      <input type="text" name="Phone-Number" required>
    </section>

    <section>
      <label class="name">Current Employer</label>
      <input type="text" name="Current-Employer">
    </section>

    <section>
      <label class="name">Email*</label>
      <input type="email" name="Email" required>  
    </section>

  </fieldset>
</form>

【讨论】：