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

标签 javascript html textarea

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

最佳答案

这是一个使用纯(没有 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 上查看实际效果.

关于javascript - 如何使用纯 javascript 检测文本区域大小变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16937721/

相关文章:

javascript - 当一个类被添加到另一个类中时,在容器类上添加 CSS,反之亦然

javascript - AJAX 请求返回 JS 而不是 HTML

javascript - 自动调整文本区域大小删除退格键上的行

JavaFX TextArea字符串读取问题

javascript - Paper.js 点和路径之间的距离

javascript - 谷歌地图标记中的 Foursquare 保存按钮?

javascript - 检测何时按下@键

javascript - 使用 JavaScript 中的 onblur 事件验证电子邮件

css - 如何在不使用 'absolute' 或 'float' 的情况下布局侧边栏和主体?

javascript - javascript/jquery 中的编码器文本区域