Jump to content



Photo

[Javascript] Delete default text on form field entry


  • Please log in to reply
10 replies to this topic

#1 Axel

Axel

    --[Est. 1986]--

  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 17 January 2013 - 16:28

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


#2 Redmak

Redmak

    Neowinian Senior

  • Tech Issues Solved: 39
  • Joined: 09-July 01
  • Location: Netherlands
  • OS: Windows 8
  • Phone: HTC One

Posted 17 January 2013 - 16:31

why not use the placeholder attribute?

#3 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 17 January 2013 - 16:36

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:

#4 OP Axel

Axel

    --[Est. 1986]--

  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 17 January 2013 - 16:48

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

#5 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 17 January 2013 - 17:47

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/

#6 OP Axel

Axel

    --[Est. 1986]--

  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 18 January 2013 - 18:36

Epic! Many thanks!

#7 OP Axel

Axel

    --[Est. 1986]--

  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 18 January 2013 - 18:45

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?

#8 spacer

spacer

    I'm awesome

  • Joined: 09-November 06
  • Location: Connecticut, USA
  • OS: Windows 7
  • Phone: Nexus 4

Posted 18 January 2013 - 18:56

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>


#9 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 18 January 2013 - 19:05

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

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

#10 OP Axel

Axel

    --[Est. 1986]--

  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 18 January 2013 - 19:19

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

#11 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 18 January 2013 - 19:41

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.c...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.



Click here to login or here to register to remove this ad, it's free!