Skip to content Skip to sidebar Skip to footer
Home / Forms / Html / Placeholder / Textarea / Watermark

Html Placeholder Text In A Textarea Form

Post a Comment
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

Solution 1:

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.


Solution 2:

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.


Post a Comment for "Html Placeholder Text In A Textarea Form"