Extended Password Input
AcidJs.XPassword is a HTML5 Web Component password on steriods, allowing enabling Windows 8-like "reveal password" behavior out of the box without any JavaScript, easy like a simple HTML tag:
<acidjs-xpassword></acidjs-xpassword>
Type a password, and click the eye to reveal it.
Demo
Default X-Password Input
X-Password Input with all Properties Set
Enabled X-Password Input with Default Value
Enabled X-Password Input With Revealed Value
Disabled X-Password Input
Readonly X-Password Input
Register Mozilla's X-Tags
You need to do this just once, and add the directive either in the <head />
section or before the closing <body />
tag of the page.
<script src="AcidJs.XPassword/lib/x-tag-components.js"></script>
Register the Component on the Page via HTML5 @import
You need to do this just once, and add the directive either in the <head />
section or before the closing <body />
tag of the page.
<link rel="import" href="AcidJs.XPassword/classes/XPassword.html" />
HTML Attributes
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
JavaScript API: Methods, Getters and Setters
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
Usage and Code Insight
<p>Default X-Password Input</p> <acidjs-xpassword></acidjs-xpassword> <p> </p> <p>X-Password Input with all Properties Set</p> <acidjs-xpassword width="200" enabled="true" editable="true" name="pwd-01" id="pwd-01" value="lorem" placeholder="placeholder text" buttonhint="Reveal password"> </acidjs-xpassword> <p> </p> <p>Enabled X-Password Input with Default Value<p> <acidjs-xpassword width="500" name="pwd-01" id="pwd-01" value="lorem"> </acidjs-xpassword> <p> </p> <p>Enabled X-Password Input With Revealed Value</p> <acidjs-xpassword width="400" name="pwd-03" id="pwd-03" value="lorem" visible="true"> </acidjs-xpassword> <p> </p> <p>Disabled X-Password Input</p> <acidjs-xpassword name="pwd-02" id="pwd-02" enabled="false"> </acidjs-xpassword> <p> </p> <p>Readonly X-Password Input</p> <acidjs-xpassword name="pwd-02" id="pwd-02" editable="false"> </acidjs-xpassword> <p> </p>
/* * X-Password - Input on Steroids | HTML5 Web Component by Martin Ivanov (@wemakesitesnet) * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/ * @author Martin Ivanov * @url developer website: http://wemakesites.net/ * @url developer twitter: https://twitter.com/#!/wemakesitesnet * @url developer blog http://acidmartin.wordpress.com/ **/ acidjs-xpassword input:disabled, acidjs-xpassword input:disabled + button, acidjs-xpassword input[readonly] + button, acidjs-xpassword[visible="true"] button { cursor: default; } acidjs-xpassword input:disabled + button, acidjs-xpassword input[readonly] + button, acidjs-xpassword[visible="true"] button { opacity: .5; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; } acidjs-xpassword, acidjs-xpassword * { display: inline-block; vertical-align: middle; margin: 0; padding: 0; outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } acidjs-xpassword input::-ms-clear, acidjs-xpassword input::-ms-reveal { display: none; } acidjs-xpassword button:-moz-focus-inner { margin: 0; padding: 0; border: 0; outline: 0; } acidjs-xpassword button::-moz-focus-inner { margin: 0; padding: 0; border: 0; outline: 0; } acidjs-xpassword input { height: 32px; padding: 0 30px 0px 4px; font: normal 16px "Segoe UI", Arial, Sans-serif; border: solid 1px #000; } acidjs-xpassword button { border: 0; margin: 0 0 0 -32px; width: 28px; height: 28px; background: url("data:image/png;base64,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") no-repeat center; background-size: cover; cursor: pointer; } acidjs-xpassword button:active { -webkit-transform: scale(.9); -moz-transform: scale(.9); -ms-transform: scale(.9); -o-transform: scale(.9); transform: scale(.9); } acidjs-xpassword input:disabled { border-color: #ccc; background: #fff; } acidjs-xpassword input::-webkit-input-placeholder { color: #666; font-style: italic; } acidjs-xpassword input:-moz-placeholder { color: #666; font-style: italic; } acidjs-xpassword input::-moz-placeholder { color: #666; font-style: italic; } acidjs-xpassword input:-ms-input-placeholder { color: #666; font-style: italic; } acidjs-xpassword input:-ms-placeholder { color: #666; font-style: italic; } acidjs-xpassword input:placeholder { color: #666; font-style: italic; }