Question

我试图创建一个文本输入，其中的值是＆＃34;客户的姓名＆＃34;显示，然后当它被点击它消失，然后如果没有输入任何内容并且用户点击＆＃34;客户的姓名＆＃34;再次显示。我已经实现了这一点，但是，如果用户键入了某些内容然后改变主意，则删除他们刚刚输入的文本，然后单击关闭，＆＃34;客户端名称＆＃34;不会再出现。我非常感谢你的帮助。

$(function() {
    $('#InvClientsName').click(function(){
        if( $('#InvClientsName').attr("value") == "Client's Name" ) {
            $('#InvClientsName').attr("value", "");
         }
    });
    $('#InvClientsName').outside('click', function(e) {
        if( $('#InvClientsName').attr("value") == "" ) {
            $('#InvClientsName').attr("value", "Client's Name");
        }
    });
});

Answer 1

您需要考虑以下几点：

当用户点击您的字段（focusin event）时，该文字应该显示为空白，但这可能只会在他们尚未将任何自定义文字放入字段时才会发生
当用户点击字段（focusout event）时，文字应恢复为默认文字，但仅当文字不为空时

所以，你可以试试这个：

<强> HTML：

<input type="text" id="InvClientsName" value="Hello world!">

<强> jQuery的：

var defaultText = $('#InvClientsName').val(); // grabs the default text field value on page load

$('#InvClientsName').focusin(function() { // when entering the text field by click or tabbing
    if($(this).val().trim() == defaultText) // if it's default text
        $(this).val(''); // blank it out
});

$('#InvClientsName').focusout(function() { // when leaving the text field
    if($(this).val().trim() == '') // if the field is blank
        $(this).val(defaultText); // set the value to default
});

但，此行为与placeholder attribute非常相似，您只需将此整个过程替换为：

<input type="text" id="InvClientsName" value="" placeholder="Hello world!">

Here's a fiddle所以你可以看到差异。

输入文本切换

1 个答案: