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

小提琴

Answer 2

试试这个

$("#usernameInput").focusout(function(){
    if(this.value == ""){
        $("usernameInput").val("username");
    }
    else{
        //do nothing as user has entered username
    }

});

Answer 3

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

$("#usernameInput").blur(function(){
    if($(this).val().length < 1)
    {
      $(this).val("username");
    }
});