3

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

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

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

我试着做：

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

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

如何才能做到这一点？

谢谢

4

4 回答 4

4

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

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

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

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

$('#input').one("keydown", function () {
    $(this).val("");
});
于 2011-11-01T15:29:27.117 回答
1

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

于 2011-11-01T15:32:25.093 回答
0

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

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

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

于 2011-11-01T15:27:54.630 回答
0

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

你有两个选择：

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

于 2011-11-01T15:30:06.350 回答