Member Avatar for Stefano Mtangoo

Hi all,
I want to add some yellow background when focus turns to text input and remove it when it moves. Here is my code for JQuery

$(document).ready(
	function(){
	 //make form display yellow color when mouse is focused on item
	 $("input").focus( function(){
			$(this).css('background-color' : 'yellow');
		} );//end focus
	
	});

a HTML form

<html>
	<head>
		<title>Login in Site</title>
		<link rel="stylesheet" type="text/css" href="/loginsys/site.css" />
		<script type="text/javascript" src="/loginsys/lib/form.js">	</script>
	</head>

	<body>
	<div id="form">
		<form action="/loginsys/include/login.php" method="POST">
			<p><b>Username:</b> <input type="text" name="usrname" /></p>
			<p><b>Password:</b> <input type="text" name="passwd" /></p>
			<p><input type="submit" value="Login" /></p>
		</form>
	</div>
	</body>

</html>
  • 2 Contributors
  • 9 Replies
  • 138 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Stefano Mtangoo
Member Avatar for pritaeas

You can add another css change on the blur event:

$(document).ready(function(){
  //make form display yellow color when mouse is focused on item
  $("input").focus( function(){
    $(this).css('background-color' : 'yellow');
  } ).blur(function(){
    $(this).css('background-color' : 'white');
  });
});

You can also use the toggleClass function, instead of changing the css in code.

Edited by pritaeas because: addition
Member Avatar for Stefano Mtangoo

I see nothing happening
What might be wrong?

Member Avatar for pritaeas

typo:

<!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" xml:lang="en" lang="en"> 
  <head> 
    <title>Sandbox</title> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        //make form display yellow color when mouse is focused on item
        $("input").focus( function(){
          $(this).css('background-color', 'yellow');
         } ).blur(function(){
           $(this).css('background-color', 'white');
         });
      });
    </script>
  </head> 
  <body> 
    <form action="#" method="POST"> 
      <p><b>Username:</b> <input type="text" name="usrname" value="1" /></p> 
      <p><b>Password:</b> <input type="text" name="passwd" value="2" /></p> 
    </form> 
  </body> 
</html>
Edited by pritaeas because: n/a
Member Avatar for Stefano Mtangoo

Ok with this great tutorial I made it!
Thanks for the guy!
One thing, make sure you link JQuery first then your JS file that uses JQuery in that order

Member Avatar for Stefano Mtangoo

I missed your post
I have tested and it greatly work.
Thanks Priteas. I'm just beginning JQuery thing and I appreciate
Solve!!

Member Avatar for Stefano Mtangoo

I have a question
right now I'm writting generic method to clean POST variables. What are necessary thing to sanitize for any text variable? What do I need to do?
Thanks

Member Avatar for Stefano Mtangoo

Sorry I was posting in PHP forum as well as in Javascript. I posted in wrong form. Thanks you saw the thread and said something

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.