No mouseup after losing hover

Question

http://jsfiddle.net/rpfHw/

We have an input and class active, which is added on mousedown and removed on mouseup.

It works good when mouse cursor is placed over input.

The problem is, mouseup doesn't work after you click on input, hold and remove cursor from it - class active is not removed.

Can it be fixed?

Answer 1

That's because mouseup was not fired on the input, but outside it. You can use a generic event handler on the document object for that:

$(document).mouseup(function() {
    $('input.active').removeClass('active');
});

http://jsfiddle.net/rpfHw/1/

Answer 2

I will propose a CSS solution. You can achive the same effect with this rules:

input:active{
    outline: 10px solid #000;
}

(IE8+)

http://jsfiddle.net/rpfHw/6/