CODEWITHSUNDEEP
javascripthtmlinputtextareaplaceholder
BigTech
BigTech

Reputation: 460

Place holder not working in textarea

I am using this code to display placeholder:

 <input type="email" name="email" value="Email" onfocus="if(this.value=='Email')this.value='';" onblur="if(this.value=='')this.value='Email';">
<textarea onfocus="if(this.value=='Message')this.value='';" onblur="if(this.value=='')this.value='Message';"> </textarea>

Placeholder is displaying in input field, but not displaying in textarea.

Here is my page link where I am using this code. http://realinvestors.businesscatalyst.com/contact.html

Upvotes: 0

Views: 12448

Answers (6)

random-forest-cat
random-forest-cat

Reputation: 36004

For IE 11 users

In IE11 my textarea was rendering the placeholder text as innerhtml, here is one way you can work around the issue

// IE 11 Hack
handleTextAreaClick(event) {
  if (event.currentTarget.innerHTML === event.currentTarget.placeholder) {
    event.currentTarget.innerHTML = ''
  }
}

Not the most elegant of solutions but it works for my case. The problem was that IE treats placeholder text as innerHTML - more info here

https://connect.microsoft.com/IE/feedback/details/811408

Upvotes: 0

elon
elon

Reputation: 1518

Use just this:

<textarea placeholder="Message"></textarea>

and remember not to put anything (even white space) between textarea tag. It's as simple :)

Upvotes: 0

SpYk3HH
SpYk3HH

Reputation: 22580

First Off, HTML5 fully supports the placeholder attribute for input && textarea.

Secondly, for older versions, there is a very simple jQuery Plugin Here that manages between HTML5 and other HTML's. In other words, if your browser supports HTML5, it won't do anything. Just use the placeholder attribute in your HTML markup and let the plugin do the work.

Third, if you're ever in question which value to pull on something like that, try using an or switch, such as var val = $(this).val() || $(this).text(). Just note, this could lead to improper results if what you WANT is on other side of or, but the first evaluates true.

Finally, If you don't want that plugin, I still suggest using the placeholder attribute and the following JavaScript:

HTML

<textarea id="a" placeholder="text are text?"></textarea>

JS

$(document).on('blur focus', '[placeholder]', function(e) {
    var val = $.trim($(this).val() || $(this).text()),  //  remove use of .trim here if you WANT to ALLOW text are to be a blank space like " "
        placeHolder = $(this).prop('placeholder');

    switch(e.type) {
        case 'focusin':
            if (val == placeHolder) $(this).val('').text('');
            break;
        case 'focusout':
            if (val == '') $(this).val(placeHolder).text(placeHolder);
            break;
    }
});

//    the following will make sure all fields having placeholder will start with placeholder in place
$('[placeholder]').each(function(i) { $(this).text($(this).prop('placeholder')); });

See Working Example Here

NOTE
I dont think $(this).val() || $(this).text() might work in some older versions of IE, thus you may need to actually distinguish, thus writing a longer if statement. I simply sought to show shortest answer here. If you need more cross browser compatibility to OLDER browsers, I really suggest the Plugin that has already done all of this work for you.

Upvotes: 0

Ganesh Pandhere
Ganesh Pandhere

Reputation: 1652

When you are using placeholder for textarea, you should make sure that no value should be present in textarea. It also takes a blank space as a value for textarea which overrides the placeholder text.

I have checked your page in firebug and it has a space in that tag hence your placeholder will not work. But remove that space and keep placeholder in it. It will definitely work.

Upvotes: 4

Voonic
Voonic

Reputation: 4785

you can also try this, why that much of code

<textarea rows="4" cols="50" placeholder="Message here...">
</textarea>

Upvotes: 2

Kippie
Kippie

Reputation: 3820

A textarea's original value is based on the text between the opening and closing tag. Make your textarea markup look like this and it should work: <textarea onfocus="if(this.value=='Message')this.value='';" onblur="if(this.value=='')this.value='Message';">Message</textarea>

As shadow pointed out, you should also take a look at the HTML5 placeholder attribute

Upvotes: 4

Related Questions