在输入字段中启用占位符，以便清空“在”用户输入之后，而不是对焦

Enable placeholder in input field such that it empties 'after' user input as opposed to onfocus

本文关键字：输入 用户 之后 清空 字段 启用 占位符      更新时间：2023-09-26

我想将占位符属性用于HTML输入[type=text]元素，以便占位符文本在用户开始键入后消失，而不是"聚焦"。类似于关键跟踪器上的登录页面：https://www.pivotaltracker.com/signin

到目前为止，我还没有使用占位符属性。相反，我在输入字段上使用了一个"onkeyup"事件，这样一旦用户键入第一个字符，它就会清空输入字段的内容。为此，我在输入元素上设置了一个名为"data-receive"的自定义属性，该属性默认为 false，并在用户键入第一个字符后立即设置为 true。（这样它就不会继续清空字段）。我可以通过在输入字段上"取消绑定"keyup"方法来做类似的事情。

我对这种方法不太满意，我想知道是否有更好的方法可以做到这一点？

好的，

我想通了。我也从zendesk网站上得到了一些提示。首先，不使用占位符属性。标签与位置：绝对的输入字段一起使用。它的位置与与其关联的输入字段重叠。Javascript 用于跟踪 onkeyup 事件，一旦它看到输入字段的值不为空，它就会隐藏关联的标签。如果删除键入的任何内容，它将再次显示标签:)

退房：

  • 跨浏览器 HTML5 占位符文本 （演示）
使用

placeholder 属性（如果不使用 JS），但请参阅上面的链接以跨浏览器方式执行此操作。

HTML5具有placeholder属性，但它可能不适用于所有浏览器。

使用jQuery修复的HTML5占位符输入字段有一个修复程序，使其适用于所有浏览器。

执行此操作的 jQuery 插件

  • http://webcloud.se/code/jQuery-Placeholder/
  • http://www.iliadraznin.com/2011/02/jquery-placeholder-plugin/
相关文章：