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

通常，你需要在输入中添加和删除另一个类，以使文本看起来更轻一点，这很容易。只需在焦点（）上移除它并将其添加到空模糊（）上。

Answer 3

我建议使用HTML5的placeholder attribute代替JavaScript：

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

请注意 - 它并不是随处可见，但是如果您无视旧版浏览器，那么这绝对是可以解决的问题。

Answer 4

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

您有两种选择：

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

所有浏览器都不支持HTML5，所以我会尝试两种方式。

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

4 个答案: