我的页面上有一个textarea,resize:both;
我希望只有在用户调整样式时才能将样式应用于该textarea。我希望能够用CSS做到这一点,但我不认为有一个伪选择器或方法只适用于纯CSS。我错了吗?
如果失败了,是否有一个我可以在jQuery中使用的事件?
将textarea重置为原始大小的最佳方法是什么?会再次使用jQuery吗?
非常感谢。
答案 0 :(得分:3)
不使用任何其他库,为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!');
}
});
答案 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");
}
});