在文本输入中实现提示

Question

我有一个带有一些文本输入的表单：登录，密码。

如果用户第一次看到此表单，输入文本应“包含”提示，如“输入登录”，“输入密码”。

如果用户单击文本输入，它的提示应该消失以允许键入。

我已经看过各种例子，它们使用带有预呈现文本的背景图像。

这些图像出现在以下jQuery：

$("form > :text").focus(function(){
   // hide image
}).blur(function(){
   // show image, if text-input is still empty
   if ( $(this).val() == "" )
      // show image with prompt
});

这种方法存在以下问题：

• 本地化是不可能的

• 需要为各种文本提示预渲染图像

• 加载图像的开销

你如何克服这样的问题？

Answer 1

这通常称为“占位符”，现在实际上可以在多个浏览器中使用。

查看疯狂形式：占位符文本 ：

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

对于不支持它的浏览器，这里是一个JavaScript（jQuery）垫片，它将使用该文本来模拟相同的效果： jquery-html5-placeholder-shim 。 如果你包含对垫片的引用，只需将它添加到你的JavaScript中就可以了。

$(function(){
    $.placeholder.shim();
});

至于本地化的问题，只要您使用placeholder属性中的正确信息生成HTML，您应该没问题。

Answer 2

因为Zuul，可以提交.value，并可能绕过表单完成规则和要求，而无需用户输入任何内容。 占位符是一个较软的值，如果用户没有聚焦，表单不会将其识别为实际值。

一个简单的解决方案，结合您的答案，更直接地解决提问者的问题可能是这样的：

这将在选择/聚焦字段时清除占位符文本，如果取消选择则返回占位符文本，取消选择时字段中不存在任何输入：

<input type="text" placeholder="1866" onFocus="if (this.placeholder=='1866') this.placeholder = ''" onBlur="if (placeholder=='') this.placeholder='1866'">

这将仅在用户键入字段时清除占位符文本，而不是之前：

<input type="text" placeholder="1492">

此版本不需要额外的工作按预期工作。

干杯。

Answer 3

你为什么要简化这样的事情：

<input type="text" name="username" value="Your User Name" onfocus="if (this.value=='Your User Name') this.value = ''">

如果用户将焦点放在该输入上，它将删除默认文本，允许写一些新的:)