• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1263
  • Last Modified:

Dynamic input field value with mootools javascript

Hi all,
Can anyone help with the following mootools javascript, my mootools coding skills are very very basic are would really appreciated some help.

I want to achive the following:

Input fields which:
1) Clear themselves of their default text when clicked
2) Refill themselves with the default text when you click elsewhere (onblur), but only if they are empty.
3) If a password field, to display astericks (*) for all but the default text (ie: let it say password until the person clicks on it, but when he types it should be stars.)

Can any one help with cross browser mootools code, or an alternative javascript version?? Im lost??

Many thanks

--s--
<!-- Here is my HTML Form -->
 
                    <form action="" method="post">
                        <div>
                            <input type="text" value="domain name" id="domain" name="domain" onfocus="clearme(this, 'domain name');" onblur="checkme(this, 'domain name');"/>
                        </div>
                        <div>
                            <input type="password" value="password" id="passwd" name="passwd" onfocus="clearme(this, 'password');" onblur="checkme(this, 'password');"/>
                        </div>
                        <div class="button">
                            <button title="Go" type="submit"><em>Go</em></button>
                      	</div>
                    </form>

Open in new window

0
socross
Asked:
socross
  • 2
  • 2
1 Solution
 
hard2u2001Commented:
this is how u can do it with mootools

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <script type="text/javascript" src="mootools-1.2-core.js"></script>
  <script>
	function clearme(obj,defaultVal)
	{
		var curVal = $(obj).value.trim();
		if(curVal==defaultVal)
		{
			$(obj).value = "";
		}
		if($(obj).id=="passwd")
			$(obj).type="password"
	}
	function checkme(obj,defaultVal)
	{
		var curVal = $(obj).value.trim();
		if(curVal=="")
		{
			if($(obj).id=="passwd")
				$(obj).type="text";
			$(obj).value = defaultVal;
		}
	}
  </script>
 </head>
	
	 <form action="" method="post">
		<div>
			<input type="text" value="domain name" id="domain" name="domain" onfocus="clearme(this, 'domain name');" onblur="checkme(this, 'domain name');"/>
		</div>
		<div>
			<input type="text" value="password" id="passwd" name="passwd" onfocus="clearme(this, 'password');" onblur="checkme(this, 'password');"/>
		</div>
		<div class="button">
			<button title="Go" type="submit"><em>Go</em></button>
		</div>
	</form>
 <body>
  
 </body>
</html>

Open in new window

0
 
socrossAuthor Commented:
Many thanks hard2u2001.

There is just one thing, to ensure graceful degeneration I have to start with the password type as 'password'

How would i write a mootools onload function which will run checkme straight away??

Thanks so much for all you help so far!!

--s--
0
 
hard2u2001Commented:
You can do it easily by keeping password field intact in ur code and adding a domready event that will change the default password type to text.

See the code below.
I have done minor modifications below.
So if javascript is disabled then it will degrade gracefully.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <script type="text/javascript" src="mootools-1.2-core.js"></script>
  <script>
	function clearme(obj,defaultVal)
	{
		var curVal = $(obj).value.trim();
		if(curVal==defaultVal)
		{
			$(obj).value = "";
		}
		if($(obj).id=="passwd")
			$(obj).type="password"
	}
	function checkme(obj,defaultVal)
	{
		var curVal = $(obj).value.trim();
		if(curVal=="")
		{
			if($(obj).id=="passwd")
				$(obj).type="text";
			$(obj).value = defaultVal;
		}
	}
	window.addEvent('domready', function() {
		$("passwd").type="text";
	});
 
  </script>
 </head>
	
	 <form action="" method="post">
		<div>
			<input type="text" value="domain name" id="domain" name="domain" onfocus="clearme(this, 'domain name');" onblur="checkme(this, 'domain name');"/>
		</div>
		<div>
			<input type="password" value="password" id="passwd" name="passwd" onfocus="clearme(this, 'password');" onblur="checkme(this, 'password');"/>
		</div>
		<div class="button">
			<button title="Go" type="submit"><em>Go</em></button>
		</div>
	</form>
 <body>
  
 </body>
</html>

Open in new window

0
 
socrossAuthor Commented:
Great work thanks
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now