输入文本切换

我试图创建一个文本输入值，即“客户的名字”显示，然后当它被点击它消失，然后如果没有输入任何内容，用户点击“客户的名称”是再次显示。我已经实现了这一点，但是，如果用户键入某个内容然后改变主意，删除刚输入的文本，然后单击关闭，则不会再出现“客户名称”。我会非常感谢你的帮助。输入文本切换

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

来源

2014-05-08 user3618465

你应该不喜欢用'placeholders'来代替吗？ - http://www.w3schools.com/tags/att_input_placeholder.asp – Fizzix

“＃InvClientsName'是一个唯一的静态元素，还是被多次使用并动态创建？ – DevlshOne

有几件事情你需要考虑在这里：

当自己场上用户点击（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所以你可以看到不同之处。

来源

2014-05-08 23:02:43

+1，包括对原始问题的解决方案，以及占位符的很好选择。 – Fizzix

输入文本切换

回答

相关问题