Daffs blog Still keeping it simple

Sim·plic·i·ty

freedom from complexity, intricacy, or division into parts

Customize jQuery .val() with $.valHooks

When creating custom widgets that should act as form inputs it might be helpful to overwrite the behaviour of the jQuery .val() method. This is where the $.valHooks object can be used but as mentioned on this question on Stackoverflow there is not a lot of documentation. Here is a quick example that creates a custom myedit plugin that reads and sets the value of a div:

$.valHooks['myedit'] = {
    get : function(el) {
        return $(el).html();
    },
    set : function(el, val)
    {
        $(el).html(val);
    }
};

$.fn.myedit = function()
{
    this.each(function() {
        this.type = 'myedit';
    });
    return this;
}

$('#edit').myedit().val(' Hi there!');
$('#value').html('The value is : ' + $('#edit').val());
blog comments powered by Disqus