Place holder not working in textarea

Question

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

why you're putting your script-inline with your DOM.. can you just put them like in script.js ? — Drixson Oseña, Sep 11 '13 at 08:13
possible duplicate of [Why isn't my textarea's placeholder showing up?](http://stackoverflow.com/questions/10585759/why-isnt-my-textareas-placeholder-showing-up) — PeeHaa, Apr 29 '15 at 08:24

score 4 · Accepted Answer · answered Sep 11 '13 at 08:11

4

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

answered Sep 11 '13 at 08:11

Kippie

3,760
3
23
38

innerText is not cross browser effective – Voonic Sep 11 '13 at 08:13
@shadow: Correct. Updated my answer as the property itself wasn't needed, but the markup should've changed. – Kippie Sep 11 '13 at 08:16
Thanks Kippie ... Now Placeholder displaying... after using your code – BigTech Sep 11 '13 at 08:34

score 4 · Answer 2 · answered Sep 11 '13 at 08:18

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.

score 2 · Answer 3 · answered Sep 11 '13 at 08:12

2

you can also try this, why that much of code

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

answered Sep 11 '13 at 08:12

Voonic

4,667
3
27
58

Hi dear I also use this its also not working: – BigTech Sep 11 '13 at 08:17
1

@BigTech When you are using placeholder attribute for textarea, you should ensure that no value should be present between starting and ending tag of textarea control. It also treats a blank space or new line as a value for textarea which overrides the placeholder text. – RBT May 20 '17 at 03:04

SpYk3HH · Answer 4 · 2013-09-19T13:24:24.477

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.

score 0 · Answer 5 · answered Jul 09 '15 at 22:44

0

Use just this:

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

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

answered Jul 09 '15 at 22:44

elon

1,488
2
14
25

random-forest-cat · Answer 6 · 2017-03-28T20:46:06.147

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

Place holder not working in textarea

6 Answers6

HTML

JS

See Working Example Here