Detect mouse position over a disabled form field

This is an example for how you can detect mouse position over a disabled form field in all browsers.

by Jason

HTML

<textarea id="one" wrap="OFF" disabled="disabled">This is a disabled field.</textarea><br />
<textarea id="two" wrap="OFF">This is not a disabled field.</textarea><br />
<input type="button" id="switch-em" value="Switch" />
<div id="debug">
</div>

JavaScript

$(document).bind('mousemove', function(e) {
    $('#debug').html('mouse left: ' + e.pageX + ' mouse top: ' + e.pageY);
});

var mask = function() {
    $("input, textarea, select").each(function() {
        if (!$(this).is(':disabled')) {
            $("#" + $(this).attr('id') + "-helper").remove();
        } else {
            var pos = $(this).position();
            $(this).after('<div id="' + $(this).attr('id') + '-helper" style="position:absolute; top:' + pos.top + 'px; left:' + pos.left + 'px; width:' + $(this).outerWidth() + 'px; height:' + $(this).outerHeight() + 'px;"></div>');
        }
    });
}

mask();

$('#switch-em').click(function() {
    $('textarea').each(function() {
        if ($(this).is(':disabled')) {
            $(this).attr('disabled', '');
        } else {
            $(this).attr('disabled', 'disabled');
        }
    });
    mask();
});