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;
}