커서가 통과 한 후 비활성화 된 입력에 대한 원래 너비를 롤백하는 방법은 무엇입니까?

Question

커서가 넘어간 후에이 비활성화 된 입력을 원래 너비로 롤백하려면 어떻게해야합니까? 이미 with.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/