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

Question

我的提示工作正常，当有人将电话输入字段留空时，我的标签消息会显示，但当他们点击向下返回输入字段时，我该如何删除该消息？

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('');

• > https://api.jquery.com/remove/
• > https://api.jquery.com/focusin/
• > https://api.jquery.com/mousedown/