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

detect when any text field on my form has changed

I have a form with a whole bunch of text fields on it, I would like to detect when any of those fields have changed so that I can some css properties. Right now I have grey text in the fields explaining what it does, one the user clicks on the field, i want the text to disappear and the color to go back to black. is there any easy way to do this?

TIA :)
0
Big Monty
Asked:
Big Monty
  • 2
1 Solution
 
Amar BardoliwalaCommented:
Hello The_Big_Daddy,

you will need to use onfocus event of textbox as following

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<p>
 <input name="text1" type="text" id="text1" value="textbox 1" onFocus="this.style.background ='yellow';this.value=''" onBlur="this.style.background='white'">
</p>
<p>
 <input name="text2" type="text" id="text2" value="textbox 2" onFocus="this.style.background = 'yellow'" onBlur="this.style.background='white'">
</p>
</body>
</html>

Open in new window


Hope this will help you.

Thank You.

Amar Bardoliwala
0
 
ProculopsisCommented:
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
 
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
 
<style type='text/css'>
    .hint { color: grey; background-color: beige; }
.normal { color: black }

  </style>
 


<script type='text/javascript'>//<![CDATA[

jQuery(document).ready(function() {

    $(".hint[hint]").each(function() {
        $(this).val($(this).attr("hint"))
            });

    $(".hint[hint]").focus(function() {
        if ($(this).val() == $(this).attr("hint")) {
            $(this).val("").toggleClass("hint").toggleClass("normal");
        }
    });

    $(".hint[hint]").blur(function() {
        if ($(this).val() == "") {
            $(this).val($(this).attr("hint")).toggleClass("hint").toggleClass("normal");
        }
    });




});
//]]>  

</script>


</head>
<body>
  <input class="hint" hint="First Name" />
<input class="hint" hint="Last Name" />

</body>
</html>
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
Proculopsis:

Is there any way to make it so I do not have to add classes to all of my text boxes? there a lot of them and they already have classes assigned to them (not the same name) and would require me to rewrite other jQuery code where I'm selecting certain text boxes by class name
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
not the exact solution I added but pointed me in the right direction
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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