Html placeholder text in a textarea form

Question

On one of my websites I have created a form that collects the persons name, email and a description of their idea.

I limited the characters of the description to 500 characters as I don't want to read a ton and I figured out how to have the text appear in the textarea before the user inputs what they want.

Currently the user has to delete "Description of your idea" themselves but I want to add the placeholder class where it deletes what I have written in the textarea when they click the textarea

I have looked on a few sites and couldn't figure out how to use it I placed it in my code, but usually the class just appeared as text inside my textarea.

Any help on using this class would be great thank you

Here is what I have written

Inside the head tags

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>

Inside the body tags

<form name="form1" method="post" action="ideas.php"> 
Your Name: &nbsp;<input type="text" name="name"><br>
Your Email: &nbsp;<input type="text" name="email"<br>
<textarea name="desc" cols=50 rows=10 onKeyDown="limitText(this.form.desc,this.form.countdown,500);" 
onKeyUp="limitText(this.form.desc,this.form.countdown,500);">Description of your idea</textarea><br>
<font size="1">(Maximum characters: 500)<br>
You have <input readonly type="text" name="countdown" size="3" value="500"> characters left.</font>
<br>
<input type="submit" name="Submit" value="Submit!"> </form>

@jnpcl 'watermark' term is also used in this case. I've added tag back (instead of 'website', which adds no information). — Nikita Rybak, Feb 16 '11 at 22:38
@Nikita: When I first read the question title, it made me think he wanted one of those scripts that adds content when it's copied to the clipboard from the web page. That's what `watermark` means to me, anyways. — drudge, Feb 16 '11 at 22:43

score 27 · Answer 1 · edited Oct 06 '11 at 09:38

There is a feature in HTML5 called 'placeholders', which produces exactly this feature without you having to do any coding at all.

All you need to do is add a placeholder attribute to your form field, like so:

<input type='text' name='name' placeholder='Enter your name'>

Sadly, of course, only a few browsers currently support it, but give it a go in Safari or Chrome to see it in action. The good news is that it is being added to virtually all browsers in the near future.

Of course, you still need to cater for users with older browsers, but you may as well make use of the feature in browsers that can use it.

A good way to deal with it is to use the placeholder attribute, and only fall back to the Javascript solution if the browser doesn't support the feature. The Javascript solution can take the text from the placeholder attribute, so you only need to specify it in one place.

See this page for how to detect whether the placeholder feature is supported: http://diveintohtml5.ep.io/detect.html

(or, as it says on that page, just use Modernizr)

The Javascript fall-back code is fairly simple to implement. Exactly how you do it would depend on whether you want to use JQuery or not, but here are links to a few examples:

And of course Google will give you loads more if you search for html5 placeholder fallback or something similar.

Hope that helps.

kfox · Accepted Answer · 2011-02-16T21:08:20.950

Check out http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html I think it has what you are looking for.

Here is a simple page that has an email field on it that I quickly put together (pulled mostly from the tutorial).

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //  Focus auto-focus fields
        $('.auto-focus:first').focus();

        //  Initialize auto-hint fields
        $('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function(){
            if($(this).val() == $(this).attr('title')){
                $(this).val('');
                $(this).removeClass('auto-hint');
            }
        });

        $('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function(){
            if($(this).val() == '' && $(this).attr('title') != ''){
                $(this).val($(this).attr('title'));
                $(this).addClass('auto-hint');
            }
        });

        $('INPUT.auto-hint, TEXTAREA.auto-hint').each(function(){
            if($(this).attr('title') == ''){ return; }
            if($(this).val() == ''){ $(this).val($(this).attr('title')); }
            else { $(this).removeClass('auto-hint'); }
        });
    });
</script>
</head>
<body>
<form>
Email: <input type="text" name="email" id="email" title="i.e. me@example.com" class="auto-hint" />
</form>
</body>
</html>

The title text is put in the field if it's empty, and removed once the user starts typing.

Html placeholder text in a textarea form

2 Answers2

Linked