javascript - 用户单击时更改输入的背景颜色

Question

首先，我认为这个问题可能在网站上的某个地方有答案，很抱歉重复，但我找不到我想要的。

所以...我有一个带有 4 个输入的表单，我希望当有人单击输入以输入要更改的值背景颜色时，以及当用户单击其他地方将其更改回正常时。 如果有人有多个例子请写下来，我想知道更多关于 javascript 是如何工作的。

 <form>
                <div>
                    <label for="name">NAME</label>
                    <input class="input" type="text" name="name" id="name" placeholder="Please enter your name">
                </div>
                <div>
                    <label for="company">COMPANY</label>
                    <input class="input" type="text" name="company" id="company"
                        placeholder="Leave it empty if you don`t have a name">
                </div>
                <div>
                    <label for="phone">PHONE</label>
                    <input class="input"  type="text" name="phone" id="phone"
                        placeholder="Please,enter your mobile phone">
                </div>
                <div>
                    <label for="email">EMAIL</label>
                    <input class="input" type="email" name="email" id="email" placeholder="Your email address">
                </div>
                <div class="message">
                    <label for="message">MESSAGE</label>
                    <textarea class="input" name="message" id="message" cols="54" rows="15"></textarea>
                </div>
                <a href="#" class="btn btn-large">Send</a>
            </form>

Answer 1

使用:focus pseudo-class selector在元素获得焦点时应用 CSS。

input:focus {
  background-color: #ddd;
}

<form>
  <div>
    <label for="name">NAME</label>
    <input class="input" type="text" name="name" id="name" placeholder="Please enter your name">
  </div>
  <div>
    <label for="company">COMPANY</label>
    <input class="input" type="text" name="company" id="company" placeholder="Leave it empty if you don`t have a name">
  </div>
  <div>
    <label for="phone">PHONE</label>
    <input class="input" type="text" name="phone" id="phone" placeholder="Please,enter your mobile phone">
  </div>
  <div>
    <label for="email">EMAIL</label>
    <input class="input" type="email" name="email" id="email" placeholder="Your email address">
  </div>
  <div class="message">
    <label for="message">MESSAGE</label>
    <textarea class="input" name="message" id="message" cols="54" rows="15"></textarea>
  </div>
  <a href="#" class="btn btn-large">Send</a>
</form>

---

更新:如果您想在每次点击时切换状态，那么您需要根据点击事件进行切换(可能是一个类)。