Question

我的页面上有一个textarea，resize:both;

我希望只有在用户调整样式时才能将样式应用于该textarea。我希望能够用CSS做到这一点，但我不认为有一个伪选择器或方法只适用于纯CSS。我错了吗？

如果失败了，是否有一个我可以在jQuery中使用的事件？

将textarea重置为原始大小的最佳方法是什么？会再次使用jQuery吗？

非常感谢。

Answer 1

不使用任何其他库，为textarea创建自己的resize事件可以这样做：

$('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事件之前，您需要首先使textarea可调整大小。你可以使用jQuery UI resizable()来做到这一点，在里面你可以调用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
    }
});

这是 DEMO

Answer 3

你可以试试这个..

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

http://jsfiddle.net/gR9UV/

Textarea：在调整大小时应用样式

3 个答案: