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

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

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

Answer 2

为什么只使用以下内容来简化：

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

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

Answer 3

因为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">

这个版本不需要额外的工作就可以了。

干杯。

在文本输入中实现提示

3 个答案: