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

时间:2014-02-11 11:31:52

标签: jquery html css

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

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

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

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

非常感谢。

3 个答案:

答案 0 :(得分:3)

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

DEMO jsFiddle

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

答案 1 :(得分: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

答案 2 :(得分:0)

你可以试试这个..

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

http://jsfiddle.net/gR9UV/