javascript - 在文本输入中实现提示

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

如果用户初次看到此表格，则输入文本应“包含”提示，例如“输入登录名”，“输入密码”。

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

我看过各种示例，这些示例使用带有预渲染文本的背景图像。

这些图像随以下jQuery一起出现：

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

此方法存在以下问题：


本地化是不可能的
需要为各种文本提示预渲染图像
加载图像的开销


您如何克服此类问题？

最佳答案

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

签出A Form of Madness: Placeholder Text：

<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，就可以了。