如何在光标经过后回滚禁用输入的原始宽度

Question

如何在光标经过后将此禁用的输入回滚到原始宽度，我已经尝试过使用.blur，但不起作用。

   $('input[readonly]').mousemove(function(){
       if ($(this).val().length > 20) {
                $(this).attr('data-default', $(this).width());
                $(this).animate({width: 300}, 'slow');
                $(this).parent().addClass('cooling');
              }
    });

请参阅以下示例：-http://jsfiddle.net/DCjYA/188/

Answer 1

不确定您需要什么，但您可以尝试焦点：

$('input').focus(function(){
if ($(this).val().length > 20) {
$(this).attr('data-default', $(this).width());
$(this).animate({width: 300}, 'slow');
$(this).parent().addClass('cooling');
}
}).blur(function(){ /* lookup the original width */
var w = $(this).attr('data-default');
$(this).animate({
width: w
}, 'slow');
$(this).parent().removeClass('cooling');
});

小提琴：http://jsfiddle.net/DCjYA/192/

Answer 2

您可能需要使用mouseenter和mouseleave。

var w;
$('input[readonly]').mouseenter(function(){
       if ($(this).val().length > 20) {
               w =   $(this).css('width');
                $(this).attr('data-default', $(this).width());
                $(this).animate({width: 300}, 'slow');
                $(this).parent().addClass('cooling');
              }
    });
$('input[readonly]').mouseleave(function(){
       if ($(this).val().length > 20) {
                $(this).attr('data-default', $(this).width());
                $(this).animate({width: w}, 'slow');
                $(this).parent().addClass('cooling');
              }
    });

你可能想删除mouseleave中的冷却类？

工作样品：http://jsfiddle.net/DCjYA/189/