function - 当用户在 jquery 中的输入之外单击时尝试填充输入字段

Question

我对 jquery 很陌生，如果这是基本的，我很抱歉。

我目前有一个函数可以清空用户名输入字段的值，这样用户就不必在输入用户名之前将其删除。

   $("#usernameInput").click(function(){
        $(this).val("");
    });

但是，如果用户在单击输入字段并使用前一个内容清除它后单击输入字段外部时没有在输入字段中输入任何内容，我就会尝试用“用户名”重新填充输入字段功能。

这是我迄今为止尝试过的:

$("html").click(function(){
    if( $("usernameInput").val() == " " ){
        $("usernameInput").val("username");
    }
    else{
        //do nothing as user has entered username
    }


});

谢谢

Answer 1

您通常会为此使用焦点和模糊事件

$("#usernameInput").on({
    focus: function(){
        if (this.value.trim() == 'username') this.value = '';
    },
    blur: function() {
        if (!this.value.trim().length) this.value = 'username';
    }
});

或者在 HTML5 中您可以使用占位符

<input type="text" id="usernameInput" placeholder="username" />

FIDDLE