11 posts in this topic

Posted

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

Share this post


Link to post
Share on other sites

Posted

why not use the placeholder attribute?

Share this post


Link to post
Share on other sites

Posted

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:

2 people like this

Share this post


Link to post
Share on other sites

Posted

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 :)

Share this post


Link to post
Share on other sites

Posted

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/

Share this post


Link to post
Share on other sites

Posted

Epic! Many thanks!

Share this post


Link to post
Share on other sites

Posted

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?

Share this post


Link to post
Share on other sites

Posted

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>

Share this post


Link to post
Share on other sites

Posted

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:

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Posted

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.