jquery - 在 keyDown 中删除输入中的文本

Question

我有一个输入框，我在网站上有一些文本

<input type="text" value="Enter Name"/>

现在我需要添加，当用户开始输入某些内容（输入第一个字母）时，我的文本将消失，他将能够输入他想要的输入。

我尝试这样做：

$('#input').keypress(function () {
                $(this).val("");
            });

但是用户只能输入一个字母，因为它不断删除文本。

这怎么能做到呢？

谢谢

Answer 1

您可以通过使用占位符

演示来做到这一点：
http://jsfiddle.net/9VhYZ/

某些浏览器尚不支持此功能，添加后备也可以跨浏览器支持它是个好主意：
http://davidwalsh.name/html5-placeholder

更新：
你可以像这样做你要求的事情：
http://jsfiddle.net/9VhYZ/1/

$('#input').one("keydown", function () {
    $(this).val("");
});

Answer 2

这种技术通常被称为重影。您可以使用占位符属性加上渐进增强。通常，我喜欢通过使用类 ghostInput 并将其全局应用于页面加载来实现此目的，这样我只需通过附加全局类即可将 Ghost 属性添加到元素中。

<input type="text" value="Enter Name" placeholder="something" class='ghostInput'/>

$(function() {
  $(".ghostInput").focus(function() {
    if ($(this).val() == $(this).attr("placeholder")) {
      $(this).val("");
    }
  }).blur(function() {
    if ($(this).val() == "") {
      $(this).val($(this).attr("placeholder"));
    }
  });
});

通常，您需要在输入中添加和删除另一个类，以使文本显得更亮一点，这相当容易。只需在 focus() 上将其删除并将其添加到空的 Blur() 上即可。

Answer 3

我建议使用 HTML5 的 占位符属性 而不是 JavaScript ：

<input type="text" value="Enter Name" placeholder="something"/>

请注意 - 并非所有地方都支持它，但如果您可以忽略旧版浏览器，那么这绝对是可以使用的解决方案。

Answer 4

您正在实现文本框的默认值。

您有两个选择：

• 插件： http://plugins.jquery.com/project/default-value
• HTML5 的 placeholder="Value" 属性。

并非所有浏览器都支持 HTML5，因此我会尝试两种浏览器。