javascript - 点击提交按钮后如何使用 "display: block"？

Question

我想更改 <input type="text" 的边框(和电子邮件)/>和 display:来自 none 的标签至 block . 我想我做的一切都正确，但也许我不太明白 onfocus完全。 代码如下:

var nameSt = false;
var emailSt = false;
var msgSt = false;

var name_form = document.forms["mailSender"]["name"].value;
var email_form = document.forms["mailSender"]["email"].value;
var msg_form = document.forms["mailSender"]["message"].value;

function namerr() {
  nameSt = true;
  if (emailSt == true && email_form == null && email_form == "") {
    document.getElementById("email_labl").style.display = "block";
  }
  if (msgSt == true && msg_form == null && msg_form == "") {
    document.getElementById("msg_labl").style.display = "block";
  }
}

function emailerr() {
  emailSt = true;
  if (nameSt == true && name_form == null && name_form == "") {
    document.getElementById("name_labl").style.display = "block";
  }
  if (msgSt == true && msg_form == null && msg_form == "") {
    document.getElementById("msg_labl").style.display = "block";
  }
}

function msgerr() {
  msgSt = true;
  if (nameSt == true && name_form == null && name_form == "") {
    document.getElementById("name_labl").style.display = "block";
  }
  if (emailSt == true && email_form == null && email_form == "") {
    document.getElementById("email_labl").style.display = "block";
  }
}

#name {
  margin-top: 40px;
  width: 300px;
  height: 22px;
  font-family: TikalSansMedium;
  font-size: 12pt;
  border: 1px solid black;
  border-radius: 4px;
  text-align: center;
  transition: all .1s;
}
#name:focus {
  outline: none !important;
  border: 3px solid #F8CB18;
}
#number {
  width: 300px;
  height: 22px;
  font-family: TikalSansMedium;
  font-size: 12pt;
  border: 1px solid black;
  border-radius: 4px;
  text-align: center;
  transition: all .1s;
}
#number:focus {
  outline: none !important;
  border: 3px solid #F8CB18;
}
#email {
  width: 300px;
  height: 22px;
  font-family: TikalSansMedium;
  font-size: 12pt;
  border: 1px solid black;
  border-radius: 4px;
  text-align: center;
  transition: all .1s;
}
#email:focus {
  outline: none !important;
  border: 3px solid #F8CB18;
}
#message {
  resize: none;
  width: 300px;
  height: 100px;
  font-family: TikalSansMedium;
  font-size: 11pt;
  border: 1px solid black;
  border-radius: 4px;
  transition: all .1s;
}
#message:focus {
  outline: none !important;
  border: 3px solid #F8CB18;
}
#name_labl,
#email_labl,
#msg_labl {
  font-family: Arial;
  font-size: 8pt;
  color: red;
  font-weight: bold;
  float: left;
  margin-left: 155px;
  border: 1px solid red;
}
#name_labl {
  display: none;
}
#email_labl {
  display: none;
}
#msg_labl {
  display: none;
}

<form id="mailSender" method="post" action="">

  <div id="nameDiv">
    <input type="text" id="name" name="name" placeholder="Your Name" onfocus="namerr()">
    <br>
    <label id="name_labl">This field is required.</label>
  </div>

  <div id="numDiv">
    <input type="text" id="number" name="number" placeholder="Your Mobile Number(Optional)">
    <br>
  </div>

  <div id="mailDiv">
    <input type="email" id="email" name="email" placeholder="Your Email" onfocus="emailerr()">
    <br />
    <label id="email_labl">This field is required.</label>
  </div>

  <div id="msgDiv">
    <textarea id="message" name="message" placeholder="Your Message" class="mCustomScrollbar" data-mcs-theme="minimal-dark" data-mcs-axis="y" onfocus="msgerr()"></textarea>
    <br>
    <label id="msg_labl">This field is required.</label>
  </div>

  <br>
  <input type="submit" id="contact_submit" name="contact_submit" value="Send Message">

</form>

Answer 1

onfocus 将在用户单击/tab 并将焦点设置到给定元素后执行。您想要的是将 onfocus 更改为 onblur (一旦用户单击/选中另一个元素并离开当前字段，它就会执行)。

onfocus:用户将焦点设置在给定元素上。

onblur:用户“离开”给定元素。