2

我想使用“自标记”输入字段来接受带有 javascript 的用户名和密码，如下所示。UX 方面，它似乎运行良好。但是，由于我在焦点/模糊时更改密码输入字段的“类型”，我担心这是否会带来任何风险。它可能不应该，但只是想确定一下。

<form method="post" action="/login">
    <fieldset>
        <h3>Login</h3>
        <input id="username" name="username" type="text" value="Username" onblur="if (this.value == '') { this.value = 'Username'; }" onfocus="if (this.value == 'Username') { this.value = ''; }"/>
        <input id="password" name="password" type="text" value="Password " onblur="if (this.value == '') { this.value = 'Password '; this.type = 'text' }" onfocus="this.type = 'password'; if (this.value == 'Password ') { this.value = ''; }"/>
        <input id="submit" name="submit" type="submit" value="Login"/>
    </fieldset>
</form>
4

3 回答 3

1

要执行您想要的操作，请使用输入字段占位符：

<input type="password" placeholder="Password">

它可以在所有现代浏览器中正常工作。

看看jsFiddle 中的 DEMO

于 2013-08-02T18:34:12.853 回答
1

我建议使用该placeholder属性，因为它完全符合您的要求。还有 jquery/javascript 组件来模拟placeholder不支持 html5 的浏览器的情况。

于 2013-08-02T18:36:08.610 回答
1

对于现代浏览器placeholder来说是完美的。毫无疑问。

但是IE 7、8、9总是滞后。所以在 IE<10 时不支持占位符。

解决方案：此 Polyfill 将完全满足您的需求。它适用于所有浏览器。

https://github.com/parndt/jquery-html5-placeholder-shim/

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

参考：ie7、ie8 和 ie9 的最佳占位符 polyfil 脚本

于 2013-08-02T18:43:20.223 回答