jQuery:Chrome 文本区域和调整大小事件
Posted
技术标签:
【中文标题】jQuery:Chrome 文本区域和调整大小事件【英文标题】:jQuery : Chrome textareas and resize event 【发布时间】:2011-01-06 23:09:50 【问题描述】:Chrome 默认会调整文本区域的大小。如何将事件附加到 textareas 的调整大小事件?做天真的$('textarea').resize(function()...)
什么都没做。
【问题讨论】:
您可以检查点击前后的宽度。 【参考方案1】:看起来您不能专门附加事件来调整文本区域的大小。调整窗口大小时触发 resize 事件。
【讨论】:
【参考方案2】:我现在无法对此进行测试,但根据 this forum entry 可以使用以下命令禁用它:
style="resize: none;"
与该条目中所述不同,max-width
和 max-height
不会删除它 - 感谢@Jonathan Sampson 提供的信息。
【讨论】:
+1resize:none
禁用它。 max-width
和 max-height
没有:jsbin.com/inane【参考方案3】:
这是一个使用 CoffeeScript 编写的 jQuery 插件。来自 Jonathan Sampson 的想法。
$.fn.sizeId = ->
return this.height() + "" + this.width()
$.fn.textAreaResized = (callback) ->
this.each ->
that = $ this
last = that.sizeId()
that.mousedown ->
last = that.sizeId()
that.mousemove ->
callback(that.get(0)) if last isnt that.sizeId()
您可以在 CoffeeScript 的主页上将其构建为 javascript
http://jashkenas.github.com/coffee-script/
使用“试用 CoffeeScript”按钮。
【讨论】:
【参考方案4】:这是一个老问题,但在 IRC 中其他人也有同样的问题,所以我决定在这里解决它:http://jsfiddle.net/vol7ron/Z7HDn/
Chrome 没有捕捉到 resize 事件,Chrome 没有捕捉到 mousedown 的说法大家都说得对,所以你需要设置 init 状态,然后通过 mouseup 来处理变化:
jQuery(document).ready(function()
// set init (default) state
var $test = jQuery('#test');
$test.data('w', $test.outerWidth());
$test.data('h', $test.outerHeight());
$test.mouseup(function()
var $this = jQuery(this);
if ( $this.outerWidth() != $this.data('w')
|| $this.outerHeight() != $this.data('h')
)
alert( $this.outerWidth() + ' - ' + $this.data('w') + '\n'
+ $this.outerHeight() + ' - ' + $this.data('h'));
// set new height/width
$this.data('w', $this.outerWidth());
$this.data('h', $this.outerHeight());
);
);
<textarea id="test"></textarea>
【讨论】:
【参考方案5】:有一个 jquery-resize,一旦包含它只会让你给定的行工作: http://benalman.com/projects/jquery-resize-plugin/
【讨论】:
【参考方案6】:与 Epeli 的回答类似,我尝试使用一个干净的解决方案来触发鼠标按下时的 resize() 事件:http://jsfiddle.net/cburgmer/jv5Yj/3/ 但是它只适用于 Firefox,因为 Chrome 似乎不会在调整大小处理程序上触发 mousedown。但是它确实会触发 mouseup。
【讨论】:
以上是关于jQuery:Chrome 文本区域和调整大小事件的主要内容,如果未能解决你的问题,请参考以下文章