jQuery - 在按下键盘时从输入框中删除文本

Question

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

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

现在，我需要补充一点，当用户开始输入内容（输入第一个字母）时，我的文本会消失，他可以输入所需的内容。

我尝试过以下方式:

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

但用户只能输入一个字母，因为它一直在删除文本。如何解决这个问题？谢谢。

- Ovi

Answer 1

您可以使用占位符来实现此操作。

示例： http://jsfiddle.net/9VhYZ/ 一些浏览器尚不支持此功能，添加备用方案以支持跨浏览器使用也是一个好主意。 http://davidwalsh.name/html5-placeholder 更新： 您可以按照以下方式实现所需内容： http://jsfiddle.net/9VhYZ/1/

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

- user920041

---

感谢您的提问。请查看我为karim79编写的内容。 - Ovi

Answer 2

通常这种技术被称为Ghosting。您可以使用占位符属性加上渐进增强。通常我喜欢使用一个类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() 上添加即可。

- Owen Allen

---

不错，但如果用户开始输入时是否有一种方法来执行上述操作，因为我需要输入聚焦在第一位并带有文本。 - Ovi

有没有任何方法可以不这样设计呢？对于用户来说，当内容已经存在时，他们不知道在哪里放置光标就需要输入内容，这相当尴尬。理论上，当他们键入一个字母并且字段被清除时，他们会失去他们键入的字符，除非你记录并保存该字符。而且它变得越来越复杂。但是，是的，你可以将事件绑定到keypress和blur，我只是不建议这样做。 - Owen Allen

我知道那样做行不通，但我想要像这个网站在提问时标题中的那种东西，在开始输入时文字被擦除的效果... - Ovi

@Nucleon 技巧在于将幽灵文本放在一个绝对定位的 div 中，在输入框上方或背后（如果输入框具有透明背景），并进行相应的样式设置。现在，当用户聚焦于该输入框时，由于该输入框在技术上是空的，所以光标将出现在输入框的开头位置。 - crush

Answer 3

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

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

警告 - 它并不被所有浏览器支持，但如果你可以忽略旧版浏览器，那么这绝对是最佳解决方案。

- karim79

---

谢谢，以前不知道这个，我会用在其他地方。但是在这种情况下，当表单打开时，我需要输入框聚焦在我放置的文本上，只有在用户开始输入后它才应该消失。（就像在这个网站上提出新问题时，在问题标题中的那种类型） - Ovi

Answer 4

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

你有两个选择：

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

并非所有浏览器都支持HTML5，所以我建议你两个都试一下。

- Blender