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

发布于 2024-12-28 17:59:48 字数 472 浏览 0 评论 0原文

光标经过后如何回滚到原始宽度这个禁用的输入，我已经尝试过 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/

原文

How do I roll back to original width this disabled input after cursor pass over, I already tried with.blur but is not working.

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

Please See the Below Example :-
http://jsfiddle.net/DCjYA/188/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

流云如水 2025-01-04 17:59:48

不确定你需要什么，但你可以尝试聚焦：

$('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');
});

fiddle：http://jsfiddle.net/DCjYA/192/

Not sure for what you need this but you can try focus:

$('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');
});

fiddle:http://jsfiddle.net/DCjYA/192/

回复收藏 0 原文

孤君无依 2025-01-04 17:59:48

您可能想使用 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/

You might want to use mouseenter and mouseleave instead.

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');
              }
    });

You might want to remove cooling class in mouseleave?

Working sample:
http://jsfiddle.net/DCjYA/189/

回复收藏 0 原文

~没有更多了~