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

remove label message on keydown - javascript

快速提问,我的提示工作正常,当有人将 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>

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

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

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

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

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

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

只需将您的输入标签上的功能添加到 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>