Question

快速提问，我的提示工作正常，当有人将手机输入字段留空时，我的标签信息会显示，但如果他们在点击时返回输入栏，我该如何删除该消息？

＆＃13;

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;
		}

＆＃13;

	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;

＆＃13;

<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>

＆＃13;

Answer 1

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

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

或者，可能只是在对输入进行焦点时删除提示字段，因此键盘导航也可以：

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

如果您不想实际删除标签并将其标记为空白，则可以将remove（）调用替换为：

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

Answer 2

只需将ur输入标签上的函数添加到remove_msg

即可

＆＃13;

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");

}

＆＃13;

	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;
    }

＆＃13;

<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>

＆＃13;

删除keydown上的标签消息 - javascript

2 个答案: