On mouseDown & mouseUp Event in jQuery

by Faisal Khan Janjua

HTML

<input type="text" />
<div></div>

CSS

input{
    border: 1px solid #ccc;
    padding:4px 8px;
}
.add_border {
    border: 1px solid #F99;
}

JavaScript

$('input').mousedown(function () {
    $('div').append("<p>Down</p>");
    $('input').addClass('add_border');
}).mouseup(function () {
    $('div').append("<p>UP</p>");
    $('input').removeClass('add_border');
});