HTML5, CSS3 & JS Experiments

By Martin Ivanov

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