调整textarea的大小?
当前版本的Firefox和Chrome包含一个拖动处理程序以调整<textarea>
框的大小。我需要捕获调整大小的事件,我认为使用jQuery的resize()
事件会很容易,但是它不起作用!
有没有办法捕获它?
回答:
Chrome不会捕获resize事件,Chrome不会捕获mousedown,因此您需要设置init状态,然后通过mouseup处理更改:
jQuery(document).ready(function(){ var $textareas = jQuery('textarea');
// store init (default) state
$textareas.data('x', $textareas.outerWidth());
$textareas.data('y', $textareas.outerHeight());
$textareas.mouseup(function(){
var $this = jQuery(this);
if ( $this.outerWidth() != $this.data('x')
|| $this.outerHeight() != $this.data('y') )
{
// Resize Action Here
alert( $this.outerWidth() + ' - ' + $this.data('x') + '\n'
+ $this.outerHeight() + ' - ' + $this.data('y')
);
}
// store new height/width
$this.data('x', $this.outerWidth());
$this.data('y', $this.outerHeight());
});
});
HTML
<textarea></textarea><textarea></textarea>
注意:
您可以像侯赛因所做的那样附加自己可调整大小的内容,但是如果您想要原始的可调整大小的内容,则可以使用上面的代码
正如布莱恩·唐宁(Bryan Downing)所提到的那样,当您将鼠标悬停在文本区域上方时,将鼠标悬停在上面时,此方法有效。但是,在某些情况下可能不会发生这种情况,例如当浏览器未最大化并且您继续拖动到浏览器范围之外或用于resize:vertical锁定移动时。
对于更高级的功能,您需要添加其他侦听器,可能需要添加队列和间隔扫描程序。还是使用mousemove,就像我相信jQuery可调整大小一样-问题就变成了您对性能和性能有何评价?
更新:此后对浏览器的UI进行了更改。现在,双击角落可以将文本框收缩为其默认大小。因此,您还可能需要在此事件之前/之后捕获更改。
以上是 调整textarea的大小? 的全部内容, 来源链接: utcz.com/qa/433535.html