javascript - 如何使用纯 javascript 检测文本区域大小变化？

Question

我想在 textarea 的大小发生变化时通知，那时候发生了什么事件，我该如何检测？

Answer 1

这是一个使用纯(没有 jQuery 等依赖项)Javascript 的小示例。

它使用 mouseup 和 keyup 处理程序以及一个可选的间隔来检测更改。

var detectResize = (function() {

  function detectResize(id, intervall, callback) {
    this.id = id;
    this.el = document.getElementById(this.id);
    this.callback = callback || function(){};

    if (this.el) {
      var self = this;
      this.width = this.el.clientWidth;
      this.height = this.el.clientHeight;

      this.el.addEventListener('mouseup', function() {
        self.detectResize();
      });

      this.el.addEventListener('keyup', function() {
        self.detectResize();
      });

      if(intervall) setInterval(function() {
          self.detectResize();
      }, intervall);

    }
    return null;
  }

  detectResize.prototype.detectResize = function() {
      if (this.width != this.el.clientWidth || this.height != this.el.clientHeight) {
        this.callback(this);
        this.width = this.el.clientWidth;
        this.height = this.el.clientHeight;
      }
  };

  return detectResize;

})();

用法:new detectResize(element-id, interval in ms or 0, callback function)

例子:

<textarea id="mytextarea"></textarea>
<script type="text/javascript">
var mytextarea = new detectResize('mytextarea', 500, function() {
  alert('changed');
});
</script>

在 jsfiddle.net/pyaNS 上查看实际效果.