EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: rkpunjal on June 28, 2016, 03:11:08 AM



Title: Do we have anything that can help us create the "Show-password" functionality
Post by: rkpunjal on June 28, 2016, 03:11:08 AM
Do we have anything that can help us create the "Show-password" functionality ?


Title: Re: Do we have anything that can help us create the "Show-password" functionality
Post by: jarry on June 28, 2016, 07:41:45 AM
The 'passwordbox' plugin will be available since next version. Here is an example that demonstrates the basic functionality of the passwordbox component.

http://www.jeasyui.com/easyui/demo/passwordbox/basic.html


Title: Re: Do we have anything that can help us create the "Show-password" functionality
Post by: rkpunjal on June 29, 2016, 04:33:21 AM
That looks very good  :)

When would it be released ?


Title: Re: Do we have anything that can help us create the "Show-password" functionality
Post by: rkpunjal on June 30, 2016, 06:52:06 AM
Meanwhile, until it is realeased,
I have done my own implementation  ;)

For those who are interested, this is how you could do it.

Step 1.
Create 2 icons, One for open-eye and other for the closed eye and place them in the icons folder
(I have attaced the icon images)

Step 2.
Go to the icons.css and add the icon class and point to the relevant icon images

Code:
.icon-eye-open{
background:url('icons/eye_open.png') no-repeat center center;
}
.icon-eye-closed{
background:url('icons/eye_closed.png') no-repeat center center;
}


Step 3.
my new password input looks like this (note the data-options) :

Code:
                                    <input name="oldPassword"
                                           id="oldPassword"
                                           class="easyui-textbox"
                                           type="password"
                                           maxlength="50"
                                           required="true"
                                           missingMessage="Please enter Existing Password"
                                           data-options="
                                           icons:[{
                                                iconCls:'icon-eye-open',
                                                handler: function(e){
                                                    handleShowHidePassword(e);
                                                }
                                            }]
                                           "

                                    >

Step 4.
the javascript function handleShowHidePassword

Code:
function handleShowHidePassword(e){
var currentInputType = $(e.data.target).textbox('textbox').attr('type');
var newInputType = '';
var theIcon = $(e.data.target).textbox('getIcon', 0);
var currentIconClassName =  theIcon[0].className;
var newIconClassName = "";

if(currentInputType == 'password'){
newInputType = 'text';
newIconClassName = "textbox-icon icon-eye-closed";
}else if(currentInputType == 'text'){
newInputType = 'password';
newIconClassName = "textbox-icon icon-eye-open";
}

if(newInputType=='text' || newInputType=='password'){
$(e.data.target).textbox('textbox').attr('type', newInputType);
theIcon[0].className = newIconClassName;

}
}

Hope this helps  :)