EasyUI Forum
March 29, 2024, 08:02:39 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Do we have anything that can help us create the "Show-password" functionality  (Read 5895 times)
rkpunjal
Newbie
*
Posts: 15


View Profile
« on: June 28, 2016, 03:11:08 AM »

Do we have anything that can help us create the "Show-password" functionality ?
Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #1 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
Logged
rkpunjal
Newbie
*
Posts: 15


View Profile
« Reply #2 on: June 29, 2016, 04:33:21 AM »

That looks very good  Smiley

When would it be released ?
Logged
rkpunjal
Newbie
*
Posts: 15


View Profile
« Reply #3 on: June 30, 2016, 06:52:06 AM »

Meanwhile, until it is realeased,
I have done my own implementation  Wink

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  Smiley
« Last Edit: June 30, 2016, 07:04:25 AM by rkpunjal » Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!