删除按键上的标签消息 - javascript

Question

快速提问，我的提示工作正常，当有人将 phone 输入字段留空时，我的标签消息显示，但是当他们单击向下返回输入字段时，我该如何删除该消息？

function validatePhone(){
   var phone  = document.getElementById("phone1").value;
   if(phone.length === 0) {
    console.log("phone number is required.");
    producePrompt("Phone number is required.", "messagePrompt", "red");
    return false;
   } 
  }


  function producePrompt(message, promptLocation, color) {
   document.getElementById(promptLocation).innerHTML = message;
   document.getElementById(promptLocation).style.color = color;
  }

 form {
  width: 30em;
  height: 10em;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #2c3e50;
 }

 form input {
  text-align: left;
  padding-left: 5px;
  margin: 0 0 10px 15px;
  position: relative;
  
  }

 form label {
  text-align: center;
 }

 #messagePrompt {
  color: red;

<form>
  <p>Please enter your phone number below:</p>
  <input name="phone1" id="phone1" placeholder="(000)000-0000" />
  <label for="" id="messagePrompt"></label>
  <br>
    <input type="button"  value="send message" onclick="validatePhone()"  />
 </form>

Answer 1

如果你可以使用 jQuery 这将变得非常简单：

$('#phone1').mousedown(function() {
    $('#messagePrompt').remove();
});

或者，可能只在输入焦点获得时删除提示字段，以便键盘导航也能正常工作：

$('#phone1').focusin(function() {
    $('#messagePrompt').remove();
});

如果您实际上不想删除标签并将其设为空白，您可以将 remove() 调用替换为：

$('#messagePrompt').text('');

Answer 2

只需将您的输入标签上的功能添加到 remove_msg

function validatePhone(){
   var phone  = document.getElementById("phone1").value;
   if(phone.length === 0) {
    console.log("phone number is required.");
    producePrompt("Phone number is required.", "messagePrompt", "red");
    return false;
   } 
  }


  function producePrompt(message, promptLocation, color) {
   document.getElementById(promptLocation).innerHTML = message;
   document.getElementById(promptLocation).style.color = color;
  }

function remove_msg(){
    producePrompt(" ", "messagePrompt", "red");

}

 form {
  width: 30em;
  height: 10em;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #2c3e50;
 }

 form input {
  text-align: left;
  padding-left: 5px;
  margin: 0 0 10px 15px;
  position: relative;
  
  }

 form label {
  text-align: center;
 }

 #messagePrompt {
  color: red;
    }

<form>
  <p>Please enter your phone number below:</p>
  <input name="phone1" id="phone1" placeholder="(000)000-0000" onclick="remove_msg()" />
  <label for="" id="messagePrompt"></label>
  <br>
  <input type="button"  value="send message" onclick="validatePhone()"  />
</form>

删除按键上的标签消息 - javascript

remove label message on keydown - javascript

javascript

javascript-events