[Javascript] Delete default text on form field entry

[Axel]

I've done a little searching and found some javascript that does sort of what I'm after.

var addEvent = function(elem, type, fn) { // Simple utility for cross-browser event handling

if (elem.addEventListener) elem.addEventListener(type, fn, false);

else if (elem.attachEvent) elem.attachEvent('on' + type, fn);

},

textField = document.getElementById('myField'),

placeholder = 'Type some text'; // The placeholder text

addEvent(textField, 'focus', function() {

if (this.value === placeholder) this.value = '';

});

addEvent(textField, 'blur', function() {

if (this.value === '') this.value = placeholder;

});

Thing is as I'm going to be creating quite a few forms with various different field names etc, I wanted to know the best way to implement this so that it would clear any field on first click but not the second (so it doesn't delete what the user has entered), rather than having to list out all of the placeholder text and field names.

I hope this makes sense. I may just be over complicating things!

Many thanks :),

Alex

[Redmak Administrators]

why not use the placeholder attribute?

[threetonesun]

I've done a little searching and found some javascript that does sort of what I'm after.

Thing is as I'm going to be creating quite a few forms with various different field names etc, I wanted to know the best way to implement this so that it would clear any field on first click but not the second (so it doesn't delete what the user has entered), rather than having to list out all of the placeholder text and field names.

I hope this makes sense. I may just be over complicating things!

Many thanks :),

Alex

Get the value of any form fields after the page loads and store them. Once the field comes into focus, compare the current value with the stored value... if it's the original value, erase it, if not, leave it alone.

Or, placeholder, and everyone without HTML5 can go screw. :laugh:

[Axel]

Get the value of any form fields after the page loads and store them. Once the field comes into focus, compare the current value with the stored value... if it's the original value, erase it, if not, leave it alone.

Or, placeholder, and everyone without HTML5 can go screw. :laugh:

You're assuming i know javascript. Javascript scares me *hides* :laugh:

I was going to use placeholder but I was just after something cross browser. Meh - I'll worry about it later!

Cheers :)

[threetonesun]

You're assuming i know javascript. Javascript scares me *hides* :laugh:

I was going to use placeholder but I was just after something cross browser. Meh - I'll worry about it later!

Cheers :)

Here's a fiddle for you, using jQuery: http://jsfiddle.net/yrBXc/

[Axel]

Epic! Many thanks!

[Axel]

hmmm cant seem to get it to work.

Inserted it like this:

<script type="text/javascript">

$inputs = $('input, textarea');

$inputs.each(function(){

$val = $(this).val();

$(this).data('initial', $val);
});

$inputs.focus(function(){
 $val = $(this).val() == $(this).data('initial') ?  '' : $(this).val() ;
$(this).val($val);

});

</script>

Where in the document do I need to insert it?

[spacer]

You should wrap your code in the document ready method defined here: http://api.jquery.com/ready/.

Basically, using the shorthand method:

<script>
$(function() {
   // your code here.
});
</script>
[/CODE]

[threetonesun]

Also, if you weren't aware, you need to include the jQuery library. This should help: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Or perhaps someone less lazy than me could write the whole thing in js. :laugh:

[Axel]

I'm such an idiot! :laugh:

This is likely going to be integrated into a page where more javascript will exist. Is there a way to ensure it doesn't conflict? I seem to remember a noconflict tag or something along those lines from something done in the past. I'll google it!

Cheers fellas! :)

[threetonesun]

I'm such an idiot! :laugh:

This is likely going to be integrated into a page where more javascript will exist. Is there a way to ensure it doesn't conflict? I seem to remember a noconflict tag or something along those lines from something done in the past. I'll google it!

Cheers fellas! :)

Yup, there's a bunch of ways to do it: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Mostly regarding the use of $ if that's defined by another library. If it's just js + jQuery, you shouldn't have any issues.