Can I override jQuery .val() for only some input elements?

Question

Suppose I'm using a "placeholder" jQuery plugin that reads the "placeholder" attribute from input elements and simulates it for browsers that don't yet support placeholders.

But I would still like $("input").val() to work properly -- that is, to return "" if the text in the textbox is the placeholder text. Is there anyway I can override .val() just for these inputs?

Answer 1

You can override the val() method globally, then check whether it's a normal input.

Answer 2

try this:

jQuery.fn.rVal=function() {
    if(this[0]) {
        var ele=$(this[0]);
        if(ele.attr('placeholder')!=''&&ele.val()==ele.attr('placeholder')) {
            return '';
        } else {
            return ele.val();
        }
    }
    return undefined;
};

and simply use $("#ele_id").rVal() to retrieve values. Or if you want to replace the val function (and use it as normal):

jQuery.fn.rVal=jQuery.fn.val;
jQuery.fn.val=function(value) {
    if(value!=undefined) {
        return this.rVal(value);
    }
    if(this[0]) {
        var ele=$(this[0]);
        if(ele.attr('placeholder')!=''&&ele.rVal()==ele.attr('placeholder')) {
            return '';
        } else {
            return ele.rVal();
        }
    }
    return undefined;
};

Answer 3

Could you possibly use a watermark plugin?

http://code.google.com/p/jquery-watermark/

It's pretty easy to use, just call $("input").watermark("Placeholder text") and it will behave in the way you described