Javascript 调整textarea的事件大小？

当前版本的Firefox和Chrome包含一个拖动处理程序，用于调整

框的大小。我需要捕获调整大小事件，我认为使用jQuery的

resize（）

事件会很容易，但它不起作用

我还尝试了正常的

onResize

事件，但结果是一样的

---

是否有方法捕获它？

在发出调整大小事件之前，您需要首先使textarea可调整大小。您可以通过使用jQuery UI来实现这一点，并在其中调用resize事件

$("textarea").resizable({
    resize: function() {
        $("body").append("<pre>resized!</pre>");
    }
});

$（“textarea”）。可调整大小({
调整大小：函数（）{
$（“body”）.append（“resized！”）；
}
});

---

检查上的工作示例这是一个老问题，但其他人在IRC中有相同的问题，所以我决定在这里解决它：

Chrome不会捕获resize事件，Chrome也不会捕获mousedown，因此您需要设置init状态，然后通过mouseup处理更改：

<textarea></textarea>
<textarea></textarea>

HTML

注意：

您可以像侯赛因那样附加您自己的可调整大小的文件，但是如果您想要原始文件，您可以使用上面的代码

正如布莱恩·唐宁所提到的，当你的鼠标在文本区域的顶部时，这项功能就起作用了；但是，在某些情况下，这种情况可能不会发生，例如浏览器未最大化，您继续将其拖动到浏览器范围之外，或者使用

resize:vertical

锁定移动

对于更高级的内容，您需要添加其他侦听器，可能是队列和间隔扫描程序；或者使用mousemove，正如我相信jQuery Resizeble所做的那样——问题是，您对性能和性能的评价是多少

---

---

更新：此后，浏览器的UI发生了变化。现在，双击角可以将文本框收缩为默认大小。因此，您可能还需要捕获此事件前后的更改。

另一种方法是绑定到textarea上的mouseup事件。然后您可以检查大小是否更改

textarea不存在调整大小事件

可调整大小的jQueryPlugin看起来不是本地的，所以我们必须使用替代方法

模拟它的一种方法是使用mousedown/click事件。 如果您想要实时事件触发，可以这样做：

2013年11月11日更新：

$(document).ready(function(){
    $('textarea').bind('mouseup mousemove',function(){
        if(this.oldwidth  === null){this.oldwidth  = this.style.width;}
        if(this.oldheight === null){this.oldheight = this.style.height;}
        if(this.style.width != this.oldwidth || this.style.height != this.oldheight){
            $(this).resize();
            this.oldwidth  = this.style.width;
            this.oldheight = this.style.height;
        }
    });
});

---

演示：我将vol7ron的答案稍微混合了一下，只是用普通的“调整大小”事件的简单触发器替换了“此处调整大小操作”，这样您就可以“像往常一样”将任何想要发生的事情附加到调整大小事件上：

我添加了mousemove事件，因此在调整大小时拖动鼠标时也会触发调整大小，但请记住，当您移动鼠标时，它会经常触发

在这种情况下，您可能希望在实际触发或处理调整大小事件时稍微延迟一点，例如。 替换上述内容：

if(this.resize_timeout){clearTimeout(this.resize_timeout);}
this.resize_timeout = setTimeout(function(){$(this).resize();},100);

与：

示例用法，使第二个文本区域与第一个文本区域一起增长和收缩：

 
        $('textarea_container').bind('mouseup', function()
        { YourCode ; } ) ;

    

---

感谢MoonLite-您的脚本工作正常，但有时，如果您快速增加大小，鼠标指针位于mouseup上的文本区域之外，并且不会触发所需的功能。因此，我在包含元素上添加了一个mouseup事件，以使其工作可靠

.

$（'textarea_container'）.bind（'mouseup'，function（）
{YourCode；}）

---

“

FireFox现在支持文本区域上的MutationObserver事件，这似乎工作得很好。不幸的是，Chrome仍然需要一个解决方案

根据本页上的其他答案，这里有一个重构和更新版本，当调整

textarea

的大小时，它会触发一个窗口调整事件

我还为离开窗口的鼠标添加了一个事件监听器，iFrame中需要该监听器来检测

textarea

何时变大

(function(textAreaChanged){
    function store(){
        this.x = this.offsetWidth;
        this.y = this.offsetHeight;
    }

    function textAreaEvent(){
        if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) {
            textAreaChanged();
            store.call(this);
        }
    }

    Array.prototype.forEach.call(
        document.querySelectorAll('textarea'),
        function (el){
            el.addEventListener('mouseup',   textAreaEvent);
            el.addEventListener('mouseout',  textAreaEvent);
        }
    );

    window.addEventListener('mouseup',textAreaEvent)

})(function(){
    //trigger window resize
    var event = document.createEvent('Events');
    event.initEvent('resize', true, false);
    window.dispatchEvent(event);
});

在IE9及以上版本中，我们可以在不使用jQuery的情况下执行相同的操作

let el = document.querySelector('textarea')
let resizeFn = ()=>{}
let timeout = null

el.addEventListener('mousemove',()=>{
    timeout && clearTimeout(timeout)
    timeout = setTimeout(resizeFn,250)
 })

---

处理元素大小调整的标准方法是Resize Observer api，可在所有现代web浏览器版本中使用

函数outputsize（）{
width.value=textbox.offsetWidth
height.value=textbox.offsetHeight
}
outputsize（）
新的ResizeObserver（outputsize）。观察（文本框）

宽度：0

高度：0

调整我的大小。

我对同一问题的另一个版本给出了这个答案。看来这是老新闻了。无论出于什么原因，我都喜欢使用vanilla js，因此这里有一个简洁的vanilla小解决方案：

功能存储维度（元素）{
element.textWidth=element.offsetWidth；
element.text高度=element.offsetHeight；
element.value=“它会改变吗？我们还不知道…”；
}
函数onresizeMaybe（元素）{
if（element.textWidth==element.offsetWidth
&&element.textHeight==element.offsetHeight）
element.value=“无更改。\n”；
else element.value=“已调整大小！\n”；
元素值+=
`宽度：${element.textWidth}\n`
+`高度：${element.textHeight}`；
}

我发现mousemove事件和setTimeout组合在一起可以很好地解决这个问题

---

看起来不错，在我的浏览器中看起来不像本地文本区，但这没关系。您仍然需要使用resizeable（）来获得跨浏览器支持。我认为这不再有效（目前在JQuery 1.8中进行测试，这在Firefox或Chrome中对我都不起作用。文本区域看起来很糟糕，而且调整大小的句柄根本没有出现。我使用的是JQuery 1.9.1和JQuery UI 1.10.0。尽管小提琴显示了样式表，但你应该提到，这个样式表是必要的。没有样式表，它就不起作用了…）出于某种原因，您的JSFIDLE示例没有调整右侧文本区域和左侧文本区域的大小。我刚刚测试了它。您使用的浏览器是什么？我在一个网站上使用它，没有收到任何投诉。我使用的是Chrome最新版本，在调整大小时没有出现mousedown事件…只有一次鼠标点火。太奇怪了。我被激怒了

$('textarea').eq(0).resize(function(){
    var $ta2 = $('textarea').eq(1);
    $('textarea').eq(1).css('width',$ta2.css('width')).css('height',$ta2.css('height'));
});

 
        $('textarea_container').bind('mouseup', function()
        { YourCode ; } ) ;

    

(function(textAreaChanged){
    function store(){
        this.x = this.offsetWidth;
        this.y = this.offsetHeight;
    }

    function textAreaEvent(){
        if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) {
            textAreaChanged();
            store.call(this);
        }
    }

    $('textarea').each(store).on('mouseup mouseout',textAreaEvent);

    $(window).on('mouseup',textAreaEvent);

})(function(){
    $(window).trigger('resize');
});

(function(textAreaChanged){
    function store(){
        this.x = this.offsetWidth;
        this.y = this.offsetHeight;
    }

    function textAreaEvent(){
        if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) {
            textAreaChanged();
            store.call(this);
        }
    }

    Array.prototype.forEach.call(
        document.querySelectorAll('textarea'),
        function (el){
            el.addEventListener('mouseup',   textAreaEvent);
            el.addEventListener('mouseout',  textAreaEvent);
        }
    );

    window.addEventListener('mouseup',textAreaEvent)

})(function(){
    //trigger window resize
    var event = document.createEvent('Events');
    event.initEvent('resize', true, false);
    window.dispatchEvent(event);
});

let el = document.querySelector('textarea')
let resizeFn = ()=>{}
let timeout = null

el.addEventListener('mousemove',()=>{
    timeout && clearTimeout(timeout)
    timeout = setTimeout(resizeFn,250)
 })