Placeholder doubt

Need help with something HTML related, this is the place to ask.
Post Reply
Fidbeck
Posts: 147
Joined: Tue Sep 25, 2012 11:40 pm

Placeholder doubt

Post by Fidbeck »

placeholder can be used with input fields, nothing wrong with that

but for example when I click in the field the placeholder text only disappears when I start writing. How to make it disappear when I hover over it.
ExtremeGaming
Posts: 205
Joined: Mon Jul 09, 2012 11:13 pm

Re: Placeholder doubt

Post by ExtremeGaming »

If you mean when clicked, try:
<input type="text" placeholder="Enter Message..." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Message...'" />
If you really mean hover, try:
<input type="text" placeholder="Enter Message..." onmouseover="this.placeholder = ''" onmouseout="this.placeholder = 'Enter Message...'" />
<?php while(!$succeed = try()); ?>
User avatar
Helx
Posts: 350
Joined: Thu May 17, 2012 6:45 am
Location: Auckland, New Zealand

Re: Placeholder doubt

Post by Helx »

Moved to HTML section.

Question to ExtremeGaming; would I be able to use that, but with value?
Because IE simply refuses to use PlaceHolder.
Fidbeck
Posts: 147
Joined: Tue Sep 25, 2012 11:40 pm

Re: Placeholder doubt

Post by Fidbeck »

Extremegaming that would make it disappear when I click on the field to start writing righr?
ExtremeGaming
Posts: 205
Joined: Mon Jul 09, 2012 11:13 pm

Re: Placeholder doubt

Post by ExtremeGaming »

Helx wrote: Question to ExtremeGaming; would I be able to use that, but with value?
Because IE simply refuses to use PlaceHolder.
Yes just change this.placeholder to this.value

However, you will need to remove the onblur because it will submit whatever you are setting the default value to, regardless of what you enter.
Fidbeck wrote: Extremegaming that would make it disappear when I click on the field to start writing righr?
Yes once you click on the input field it will disappear.
<?php while(!$succeed = try()); ?>
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Placeholder doubt

Post by jacek »

The normal way to do this is with a bit of JavaScript.
var input = document.getElementById('the_id');

input.addEventListener('focus', function(event){
    if (this.value == ''){
        this.value = 'Enter Message...';
    }
});

input.addEventListener('blur', function(event){
    if (this.value = 'Enter Message...'){
        this.value = '';
    }
});
Image
ExtremeGaming
Posts: 205
Joined: Mon Jul 09, 2012 11:13 pm

Re: Placeholder doubt

Post by ExtremeGaming »

And in case the user has javascript disabled you can always put it in a <noscript>
<?php while(!$succeed = try()); ?>
Fidbeck
Posts: 147
Joined: Tue Sep 25, 2012 11:40 pm

Re: Placeholder doubt

Post by Fidbeck »

@ExtremeGaming
Even though I said click and hover I meant click

@Jacek
Your suggestion worked out too but ExtremeGaming's one is a bit more condensed.

Thanks for the answers
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Placeholder doubt

Post by jacek »

Fidbeck wrote:@Jacek
Your suggestion worked out too but ExtremeGaming's one is a bit more condensed.
The onAction attributes are no longer valid HTML :P
Image
Fidbeck
Posts: 147
Joined: Tue Sep 25, 2012 11:40 pm

Re: Placeholder doubt

Post by Fidbeck »

I'm not using onAction, i'm using onfocus and onblur :P kidding
itsnot? :S
Then I guess I have to change it :S
Post Reply