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


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 කරගන්න ඕන.

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

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

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

<style type="text/css">
		div{
			width: 370px;
		}
</style>

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

 

<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 එක body tag එකට උඩින් ලියන්න ඕන.කැමති නම් මේ Javascript code එකයි, style එකයි separate file වල තියාගන්න පුළුවන්.

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

toggle-pass-1-dhanushka

 

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

Advertisements

2 thoughts on “Show/Hide Password – Password Field එක Featured කරන හැටි

  1. Pingback: User Login From එකක Password Field එක Featured කරන හැටි – 1 | dhanushka's blog

  2. Pingback: User Login Form එකක Text Input Field එක Featured කරන හැටි – 1 | dhanushka's blog

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s