文本区域:调整大小时应用样式

Question

我的页面上有一个文本区域，上面有resize:both;

我希望只有在用户调整样式大小时才能将样式应用于该文本区域。最好我希望能够使用 CSS 做到这一点，但我认为没有伪选择器或方法仅适用于纯 CSS。我错了吗？

如果做不到这一点，是否有我可以在jQuery中使用的事件？

将文本区域重置为原始大小的最佳方法是什么？这会再次与jQuery一起使用吗？

非常感谢。

Answer 1

在不使用任何其他库的情况下，可以为文本区域创建自己的调整大小事件，如下所示：

演示 js小提琴

$('textarea').on({
    mousedown: function(){
        $(this).data('size', $(this).width + '*' + $(this).height());
    },
    mouseup: function(){
        if($(this).data('size') !=  $(this).width + '*' + $(this).height())
            $(this).triggerHandler('resize');
    },
    resize: function(){
        console.log('textarea resized!');
    }
});

Answer 2

在

发出 resize 事件之前，您需要先使文本区域可调整大小。你可以通过使用jQuery UI resizeable（）来做到这一点，你可以在其中调用resize事件。

.CSS

.resizing {
    background: #f2f2f2;
    border: 1px solid #4cf;
}

.JS

$("textarea").resizable({ // Making it resizables triggers resize associated events
    resize: function() {
        $(this).addClass('resizing'); // Add style while resizing
    },
    stop: function() {
        $(this).removeClass('resizing'); // Remove style after resize finishes
    }
});

这是一个演示

Answer 3

你可以试试这个。

$("#mytextarea").resizable({
    resize: function() {
        $(this).css("resize","both");
    }
});

http://jsfiddle.net/gR9UV/