Show/Hide Password – Password Field එක Featured කරන හැටි

Share with your friends!

Web User Login Form වල validation part එක තමයි ගොඩක්ම වැදගත්. Validation එකේ තියන functionalities අනුව Application එකේ හෝ site එකේ user Friendliness එක measure වෙන්නේ. මේ පොස්ට් එකේ විස්තර වෙන්නේ මේ වගේ featured password field එකක් හදාගන්න විදිය. web coding වලදී මේ දේ කරන්න Javascript භාවිතා කරන්න පුළුවන්.

මේ පොස්ට් එකේදී කියන්නේ Show/Hide password button එකක්, එහෙමත් නැත්තම් toggle button එකක් හදාගන්න විදිය.මුලින්ම UI එක code කරගන්න ඕන.

[code language=”html”]
<div>
<fieldset>
<legend>Toggle password</legend>
<form>
<input type="text" id="pass">
<input type = "button" id = "btn" value = "Hide Password Text" onclick = "togglePass()">
</form>
</fieldset>
</div>
[/code]

මේ තියෙන්නේ UI එක.

මම මේ div එකේ width එක 370px දීලා තියෙන්නේ.head tag එක ඇතුලේ මේ code එක ලියන්න ඕන.

[code language=”css”]
<style type="text/css">
div{
width: 370px;
}
</style>
[/code]

දැන් බලමු මේකේ password එක hide කරන්නේ කොහොමද කියලා.මේ button එකේ onclick event එකේ ලියලා තියන togglePass() function එක ලියන්න දැන් තියෙන්නේ.

[code language=”javascript”]
<script type="text/javascript">
function togglePass(){
var pass = document.getElementById("pass");
var btn = document.getElementById("btn");

if(pass.type == "text"){
pass.type = "password";
btn.value = "Show Password Text";
}else{
pass.type = "text";
btn.value = "Hide Password Text";
}
}
</script>
[/code]

මේ code එක body tag එකට උඩින් ලියන්න ඕන.කැමති නම් මේ Javascript code එකයි, style එකයි separate file වල තියාගන්න පුළුවන්.

වැඩේ ඉවර උනාම මේ විදියට බලන්න පුළුවන් button එක click කරලා.

ගැටළු සහ අපැහැදිලි තැන් තියනවා නම් comment එකකින් කියන්න අමතක කරන්න එපා.

Share with your friends!