如何在光標經過後回滾禁用輸入的原始寬度？

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/