表单占位符/水印和保存的密码
我目前正在网站上编写登录表单。要求表单紧凑，并且标签应作为占位符/水印放置在电子邮件和密码字段内。
HTML5引入了placeholder属性，但是它并没有得到很好的支持。因此，我研究了许多 jQuery 插件，这些插件向本身不支持占位符功能的浏览器添加了占位符功能。
但是......它们都不能真正使用浏览器保存的密码。
当用户保存了两个或多个登录名/密码时，通常会出现此问题。然后，当选择其中一种登录名时，会发生以下情况之一：
1) 密码插入占位符后面，并且占位符仍然显示。然后用户可能会认为他们的密码未被输入。
2) 密码插入到占位符后面，现在密码点和占位符显示在彼此的顶部。令人困惑且丑陋。
3）密码以明文形式插入占位符中，并且可以以明文形式编辑（yargh！）
据我所知，问题的原因是当浏览器插入保存的登录名时没有触发任何事件。
有谁知道一些漂亮的Javascript，当用户保存多次登录时不会中断？
或者真的没有人解决这个问题吗？ （极不可能）
谢谢。
I am currently writing a login form on a website. It is required that the form is compact, and that the labels should be placed as placeholders/watermarks inside the email and password fields.
HTML5 introduces the placeholder attribute, but it is not very well supported. Therefore I have looked into a number of jQuery plugins that adds placeholder functionality to browsers that does not natively support it.
But... none of them really work with browser saved passwords.
The problem typically occurs when a user have saved two or more logins/passwords. Then, when selecting one of their logins, one of following happens:
1) The password is inserted behind the placeholder, and the placeholder is still shown. THe user may then think their password is not entered.
2) The password is inserted behind the placeholder, and it now shows the password dots and a placeholder on top of each other. Confusing and ugly.
3) The password is inserted as clear text in the placeholder, and is editable as clear text (yargh!)
As far as I can see, the cause of the problem is that no event is triggered when the browser inserts saved logins.
Does anyone know of some nifty Javascript that does not break when a user has saved more than one login?
Or can it really be true that noone has solved this problem? (highly unlikely)
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不知道问题的解决方案，但也许您可以通过一些小技巧来避免它：
http:// jsfiddle.net/elektronikLexikon/tf3sC/
将标签放在输入后面并显示/隐藏它们。
I don't know a solution for a problem, but maybe you can avoid it with a little trick:
http://jsfiddle.net/elektronikLexikon/tf3sC/
Place the labels behind the inputs and show / hide them.