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

一旦用户单击/ tabs并将焦点设置为给定元素，

onfocus将被执行。您想要的是将onfocus更改为onblur（一旦用户点击/标记另一个元素并离开当前字段，就会执行此操作。）

onfocus：用户将焦点放在给定元素上。

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

点击提交按钮后如何使用“display：block”？

1 个答案: