CODEWITHSUNDEEP
javascripthtmlcssinternet-explorer-8
Emanuele Insigne
Emanuele Insigne

Reputation: 17

custom placeholder for textarea

hello guys im having a problem regarding custom placeholder for my textarea this is my code

http://goo.gl/rIqtns jsfiddle link

scenario is that i have a content div holds textarea and div placeholder what i want is that if textarea is null and not focus placeholder is visible but if textarea is not null and focus placeholder will be not visible and textarea is focus... i need a pure javascript function or css style that will run to ie8.

Upvotes: 1

Views: 1883

Answers (5)

Anshu Dwibhashi
Anshu Dwibhashi

Reputation: 4675

You can try @JamieRead solution. But for older browsers, here's the solution, PS. this works for both, old and new browsers:

Add this to your head section:

<script>
    function unsetPlaceholder(textarea){
        if (textarea.value=='placeholdertext'){textarea.value='';};return false;
    }

    function setPlaceholder(textarea){
        if (textarea.value==''){textarea.value='placeholdertext';return false;}
    }
</script>

And this to your main body:

<textarea onfocus="unsetPlaceholder(this)"  onblur="setPlaceholder(this)">placeholdertext</textarea>

yes, replace all the occurances of 'placeholdertext' with your place holder..

JSFIDDLE

Upvotes: 1

user2511140
user2511140

Reputation: 1688

jQuery Fix for All Browsers:

HTML:

<input type="text" placeholder="Fill me …">

Javascript:

$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();

http://jsfiddle.net/u3gTL/

Upvotes: 1

David Randall
David Randall

Reputation: 770

In conjunction with using the HTML5 placeholder attribute as suggested I would also recommend using https://github.com/mathiasbynens/jquery-placeholder as a polyfill as the previously suggested https://github.com/NV/placeholder.js/ is no longer maintained.

Upvotes: 0

Oleksandr Savchenko
Oleksandr Savchenko

Reputation: 692

You can use placeholder.js library: https://github.com/NV/placeholder.js/ Works for IE>6

UPDATE: pure HTML attribute placeholder is HTML5 attribute and doesn't works in old browsers ...

Upvotes: 0

AfromanJ
AfromanJ

Reputation: 3932

You could use the HTML5 placeholder attribute placeholder="text".

HTML:

 <textarea placeholder="text"></textarea>

JsFiddle.

You can use the placeholder.js library with this as suggested by @asavchenko.

Upvotes: 0

Related Questions