jquery - 在keyDown中从输入中删除文本答案

【问题标题】：jquery - in keyDown erase text from inputjquery - 在keyDown中从输入中删除文本
【发布时间】：2011-11-01 23:55:16
【问题描述】：

我有一个输入框，我在站点中有一些文本

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

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

我试过了：

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

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

如何做到这一点？

谢谢

【问题讨论】：

标签： jquery events onkeydown

【解决方案1】：

您可以使用占位符来做到这一点

演示： http://jsfiddle.net/9VhYZ/

一些浏览器还不支持这个，添加一个后备也可能是一个跨浏览器支持它的好主意： http://davidwalsh.name/html5-placeholder

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

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

【讨论】：

感谢。请看我为 karim79 写的内容

【解决方案2】：

这种技术通常称为重影。您可以使用占位符属性加上渐进增强。通常我喜欢通过使用类 ghostInput 并在页面加载时全局应用它来做到这一点，这样我就可以通过附加全局类来向元素添加幽灵属性。

<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() 上。

【讨论】：

很好，但是如果在用户开始输入某些内容时执行上述操作，有没有办法，因为我需要输入成为焦点，首先是里面的文本。
有没有办法不那样设计它？当内容已经存在时，用户必须输入内容是非常尴尬的，因为他们不知道将光标放在哪里，理论上当他们输入一个字母并且字段擦除时，他们会丢失他们输入的字符，除非你记录并保存该字符。而且它变得越来越复杂。但是是的，您可以将事件绑定到 keypress 和 blur，我只是不推荐它。
我知道这行不通，但是当我提出一个新问题时，我想要类似于此站点中的东西类型，在问题的标题中，开始输入时文本会擦除...
@Nucleon 诀窍是将重影文本放在绝对位于输入后面（如果输入是透明背景）或输入上方的 div 中，样式匹配。现在，当该字段获得焦点时，光标将位于输入的开头，因为输入在技术上是空的。

【解决方案3】：

我建议使用 HTML5 的 placeholder attribute 而不是 JavaScript：

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

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

【讨论】：

谢谢，以前从来不知道，我会用它来做别的事情。但在这种情况下，我需要输入框在打开带有我输入的文本的表单时关注，并且只有在用户开始输入后它才会消失。（例如在提出新问题时本网站中的事物类型，在问题的标题中）

【解决方案4】：

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

你有两个选择：

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

并非所有浏览器都支持 HTML5，所以我会尝试两者。

【讨论】：