Question

We have a survey where certain pages have a single textarea question. Since it’s the only input, we want to have it focus on that box onload. But we also want to have a placeholder-style text in that same textarea.

There are quite a few solutions to making both functions work on all browsers such as this one by Ajaxblender. But I want the hint to remain after focus, then disappear when text is entered. Any ideas?

Note – I realize the HTML specs state that the placeholder element should going away on focus. So maybe I should say that I want a “watermark”. This UI is for older men with low computer literacy – they need any assistance we can provide them.

Must work with IE8 🙁

Answer 1

If I understand the question, you could try something like

HTML

<textarea id="first">Instructions go here</textarea>

jQuery

$('#first').focus().one('keydown', function(){
    $(this).val('');    
});

Example: http://jsfiddle.net/jasongennaro/AYRyH/

Explanation

1. An empty .focus() puts the focus on the field at onload.
2. .one() fires an event once for the element
3. On keydown we remove the current value, which are the instructions we added at the beginning.

EDIT

Given your comment

I need it to function a little more like a standard placeholder
though, so if you enter something, then delete it so the field is
blank, it goes back to displaying the original hint.

You could do this… capture the value and then place it back in the textarea on blur if there is nothing there.

var a = $('#first').val();

$('#first').focus().one('keydown', function(){
    $(this).val('');    
});

$('#first').blur(function(){
    if($(this).val() == ''){
       $(this).val(a); 
    }
})

Example 2: http://jsfiddle.net/jasongennaro/AYRyH/1/