在输入字段中启用占位符,以便在用户输入之后清空(而不是onfocus)

时间:2012-06-19 18:46:12

标签: javascript jquery html

我想对HTML输入[type = text]元素使用占位符属性,使得占位符文本在用户开始键入后“消失”而不是“onfocus”时消失。类似于关键跟踪器上的登录页面:https://www.pivotaltracker.com/signin

到目前为止,我还没有使用占位符属性。相反,我在输入字段上使用了'onkeyup'事件,以便在用户键入第一个字符时立即清空输入字段的内容。为此,我在输入元素上设置了一个名为'data-received'的自定义属性,默认情况下为false,一旦用户键入第一个字符,就会设置为true。 (因此它不会继续清空该字段)。我可以通过'解绑'输入字段上的'keyup'方法来做类似的事情。

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

3 个答案:

答案 0 :(得分:1)

好的,我想出来了。我也从zendesk网站上获得了一些线索。首先,不使用占位符属性。标签与输入字段一起使用,其位置为:absolute。它的位置与重叠的输入字段重叠。 Javascript用于跟踪onkeyup事件,一旦它看到输入字段的值不为空,它就会隐藏相关的标签。如果删除键入的内容,它会再次显示标签:)

答案 1 :(得分:0)

退房:

使用placeholder属性(如果不使用JS),但请参见上面的链接,以跨浏览器的方式进行。

答案 2 :(得分:0)

HTML5具有placeholder属性,但可能无法在所有浏览器中使用。

HTML5 Placeholder Input Fields Fixed with jQuery有一个修复程序,可以在所有浏览器中使用。

执行此操作的jQuery插件