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>

更新：如果要在每次单击之间切换状态，则需要基于单击事件进行切换（可能是一个类）。

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

1 个答案: