HTML input text box onchange event

HelpNearMe
HelpNearMe used Ask the Experts™
on
Hi Experts,

I'm no javascript expert so I need a hand with this.  See attached screenshot.

Currently the input field that has the text 'Full Name' is just a standard input text element with the value set to 'Full Name'.  This sucks because the user needs to delete the text in order to update the contents.

How can I use javascript to clear the value when the user clicks inside the input box?

Thanks,

HNM
sample2.jpg
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Tony van SchaikFront-end Developer
Commented:
I made an example for you, i used jQuery for that:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $('.focusme').focus(function() {
    $(this).val("");
  });
});
</script>
</head>

<body>
<input name="FullName" type="text" value="Full Name" size="10" class="focusme" />
</body>
</html>

Open in new window


More info on that here: http://api.jquery.com/focus/

Author

Commented:
I forgot to mention that it's a joomla 1.5 site, and I just tried your suggested code and it killed the image slider (JT Slideshow) which must use jquery too.  I even removed your call to the google CDN for 1.7.2 and it still killed the slideshow.. and in both instances focus event value update didn't work.

I should have mentioned the joomla thing first, but do you have any ideas how to do this given the new constraints?

HNM
Can you post URL?

I think you will have to create a JS file and add it to your Joomla template.

Find the attached file for same.

Let me know if you need more details.

add-js-to-joomla-template.js
Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

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

Commented:
I think you just need to add this code to your textbox html

 onclick="if(this.value=='Full Name') this.value=''"

Open in new window


With this code, when user clicks on the text box, default text 'Full Name' will be cleared.

You append to your html code like this

<input type="text" name="fname" value="Full Name" onclick="if(this.value=='Full Name') this.value=''">

Author

Commented:
I try some of the ideas tonight

thanks,

HNM

Author

Commented:
the external js file worked with the addition of $.noConflict
Thanks!

HNM

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial