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

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

当用户在jquery中点击输入外部时，尝试填充输入字段

3 个答案: