删除按键上的标签消息 - 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>
快速提问,我的提示工作正常,当有人将 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>