jQuery .html().length not returning correct value

I'm trying to 1) remove default text in a textarea when a user focuses on it. 2) if he doesn't enter anything and clicks away, the default text should be reinserted.

My code below handles case #1, but fails case #2 in Chrome and Safari (but not Firefox). When I enter in text (so $(this).html().length > 0) and then click away, jQuery incorrectly determines that $(this).html().length == 0, so it removes the entered text and reinserts the default text.

jQuery(document).ready(function inputHide(){
    $('textarea').each(function(){
        var this_area = $(this);
        var this_area_val;

        t开发者_开发知识库his_area_val = this_area.html();
        this_area.focus(function(){
            if(this_area.html() == this_area_val){
                    this_area.html('');
            }
        }).blur(function(){
            if(this_area.html().length == 0){
                this_area.html(this_area_val);
            }
        }); 
    });

Thanks for your help.

To get or set the contents of an input element, call the .val() method.

Don't call .html().

SLaks is right. Here's why: html()/innerHTML gives you the text node contents of the textarea in the HTML document. This content does not change when you alter the text in the textrea. The same is true of the value="..." attribute on <input>, and the checked or selected attribute vs the checked/selected property.

The HTML document content of both reflect the default value of the form field, not the current value. The current value is reflected in the property called value, which in jQuery is read using val(). Setting the value property updates the current value of the field; setting the value attribute, or HTML content of a textarea, changes only the default value of the field, not its current value.

...except that on some browsers setting the default value sets the current value as well, or may do in limited situations, which leads to the browser inconsistency. Also IE has a number of well-known bugs in this area that lead to confusing behaviour. Setting the default value is best avoided and seldom needed; you almost always want to set the current value.

The default value of the field is stored in the property defaultValue, so actually there's no need for you to try to explicitly remember the default value for each textarea. (And you shouldn't do that anyway, because the value of a form field at page load time is not necessarily the same as the default value in the HTML. If you change the value, navigate the page and then hit the back button, the form values are remembered and the initial value isn't the default value you expected.)

So your code can be simplified to:

$('textarea').focus(function() {
    if (this.value===this.defaultValue)
        this.value= '';
}).blur(function() {
    if (this.value==='')
        this.value= this.defaultValue;
});

(OK, you could write $(this).val()===$(this).attr('defaultValue') for the comparison, if you really wanted to make it gratuitously jQuery-like. I couldn't be bothered, the plain DOM version is easier to read.)

What you're trying to do is called an input field placeholder. There are a whole bunch of JQuery plug-ins already available to do exaclty this. It's also built into the HTML5 standard, meaning that most up-to-date browsers will now do it just by adding a placeholder attribute to your input or textarea tag.

If you still want to develop your own, I'd suggest not actually adding the prompt to the textarea; rather have a span containing your prompt text which you display on top of the textarea. Then all you need to do is hide() it and show() it at the appropriate moment. Much easier than messing around trying to change the text content of the field.