Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenka...
Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...
In this video we will discuss how to toggle password visibility using show / hide password checkbox.
Here is what we want to achieve
1. When Show password checkbox IS NOT CHECKED, the password should be masked
2. When Show password checkbox IS CHECKED, the password should be in clear text and visible to the user
One of the simplest ways of achieving this is by changing the type attribute of the password field depending on the checked status of Show password checkbox
1. If the Show password checkbox is CHECKED change the type to text
2. If the Show password checkbox is NOT CHECKED change the type to password
Replace < with LESSTHAN symbol and > with GREATERTHAN symbol
The following is the HTML and jQuery code
<html>
<head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $(' #cbShowPassword').click(function () { $(' #txtPassword').attr('type', $(this).is(':checked') ? 'text' : 'password'); }); }); </script>
</head>
<body style="font-family:Arial"> Password : <input type="password" id="txtPassword" /> <input type="checkbox" id="cbShowPassword" />Show password
</body>
</html>
The problem with the above approach is that it does not work in IE 8 and earlier versions. This is because with IE8 and earlier versions the type attribute of input elements cannot be changed once set. The following code works in all browsers including IE8 and earlier versions.
When Show password checkbox is clicked
1. Retrieve the value the from the password textbox and store it in a variable for later use.
2. Delete the password input filed.
3. If the "Show password" checkbox is CHECKED, then add a new input filed of type text, else add a new input filed of password. In both the cases set the value attribute of the input element = the variable created in Step 1.
<html>
<head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $(' #cbShowPassword').click(function () { var currentPassowrdFiled = $(' #txtPassword'); var currentPassword = currentPassowrdFiled.val(); currentPassowrdFiled.remove(); if ($(this).is(':checked')) { $(this).before('<input type="text" id="txtPassword" value="' + currentPassword + '">'); } else { $(this).before('<input type="password" id="txtPassword" value="' + currentPassword + '">'); } }); }); </script>
</head>
<body style="font-family:Arial"> Password : <input type="password" id="txtPassword" /> <input type="checkbox" id="cbShowPassword" />Show password
</body>
</html>
asp.net core docker jquery show hide password | |
| 123 Likes | 123 Dislikes |
| 30,151 views views | 524K followers |
| Education | Upload TimePublished on 22 May 2015 |
Related keywords
wcf vs web api,ado.net core,sql server management studio,webkinz,webadvisor,craigslist nj,wcf one piece,asp.net core 3,ajax players,weber grill parts,webtoon,tutorials by hugo,csharp corner,mvc design pattern,asp.net machine account,servers for minecraft,asp.net core dependency injection,ado.net tutorial,services angular,ajax ontario,asp.net mvc tutorial,asp.net cos'è,csharp assembly,tutorialspoint python,sql join,services briefcase,asp.net core web api,ajax jquery,wccftech,craigslist ny,asp.net zero,csharp foreach,server memes,sql date format,services online,chase,serverless architecture,server resume,wcf c#,server books,tutorialspoint javascript,mvcc connect,ado.net mysql,services technologies gps,ajax deadpool,server jobs,cvs,website,mvc tutorial,costco hours,wcf service application,tutorialspoint spring,serverless,wcf soap,jquery json tutorial for beginners,wcf cat,cool math games,wcf test client,services & training hse colombia sas,servicestack,citibank,asp.net core identity,sql union,ajax parking,sql database,asp.net core logging,mvconnect,cunyfirst,asp.net guida,wcf nba,csharp download,wcfi foundation,jquery tutorial for beginners youtube,csharp online,wcf authentication,tutorials near me,http://asp.net,server 2019,chernobyl,ado.net descargar,web of dreams,serverminer,ajax cleaner,ado.net visual studio 2019,webassign,ado.net vs entity framework,jquery tutorial for beginners in tamil,ado.net visual studio 2017,csharp list,sql like,asp.net mvc,asp.net core tutorial,sqlite,wcfm,jquery slider tutorial for beginners,ajax roster,jquery tutorial for beginners with examples step by step,mvc architecture,http://ado.net,asp.net core mvc,ajax soccer,server hosting,wcfi,jquery tutorial for beginners with examples pdf,jquery tutorial for beginners with examples step by step pdf,ajax dish soap,capital one,server rack,tutorialspoint html,csharp interface,craigslist,webroot,tutorialspoint reactjs,ajax request,wcf dragon ball,asp.net core 2.2,tutorialspoint python 3,sql developer,webster,services transmission company sas,sql group by,asp.net core signalr,services manager,mvc framework,ajax paving,mvc near me,tutorialspoint spring boot,mvc map,csharp online compiler,asp.net download,sql between,ado.net c# pdf,services tag dell,wcf 2019 nba,csharp switch,ado.net ventajas y desventajas,csharpstar,wcf tutorial,tutorialspoint,ajax meaning,csharp-video-tutorials.blogspot,tutorials dojo,central park 5,csharp string format,ado.net c#,asp.net core github,jquery tutorial for beginners kudvenkat,server status,ajax fc,server jobs nyc,asp.net core swagger,sql formatter,credit karma,services group,jquery tutorial for beginners full,server error in '/' application,services windows,asp.net core 3.0,sql injection,jquery tutorial for beginners – learn jquery,tutorialspoint c#,wcf ria services,calculator,ado.net entity data model,sql insert,tutorialspoint tableau,services google play apk,sqlyog,asp.net core 3 release date,sql server,server job description,tutorials by a,servicenow,webcam,mvc hours,webmd symptom,jquery ajax tutorial for beginners,csharp array,csharp enum,ajax call,asp.net core 2. guida completa per lo sviluppatore,asp.net core,server pro,server status ffxiv,cheap flights,webcrims,asp.net core hosting,services sas,jquery tutorial for beginners with examples free download,tutorialspoint java,tutorialspoint java compiler,webmd,csharp to json,college football,ado.net dataset,csharp dictionary,cnn,website builder,tutorialspoint sql,asp.net web api,server side rendering,weber grills,sql server 2017,tutorialspoint spark,mvc nj,ado.net oracle,asp.net core download,csharp to vb.net,jquery best tutorial for beginners,webster bank,webstaurant,tutorialsystems,ajax post,services fms publish announcement,services.msc no abre,ajax jersey,csharp operator,asp.net core razor pages,server duties,asp.net core environment variables,csharp random,jquery tutorial for beginners step by step,century 21,services consultores,services consulting,mvcsd,services.msc,mvcsc,ado.net pdf,asp.net core configuration,ajax marvel,jquery datatable tutorial for beginners,sql update,asp.net tutorial,mvc medical,ado.net entity data model visual studio 2019,wcfs international curriculum,mvc2,ado.net entity data model visual studio 2017,chase online,wcf api,costco,server jobs near me,webex,sql meaning,sql tutorial,sql commands,jquery validation tutorial for beginners with examples,jquery online tutorial for beginners,ado.net entity framework,ajax tavern,tutorialsteacher,ajax javascript,jquery tutorial for beginners pdf,jquery ajax tutorial for beginners with examples,services desk,ajax greek,csharp tutorial,mvc pattern,ado.net sql server,ado.net connection,asp.net identity,mvcu,asp.net core middleware,jquery tutorial for beginners in hindi,wcf web service,mvc webadvisor,web store,mvcc,webmail,mvci,mvctc,
Không có nhận xét nào:
Đăng nhận xét