如何检测纯JavaScript的textarea大小更改？ [英] How to detect textarea size change with pure javascript?

问题描述

p>这是一个使用纯的小例子（没有jQuery等）。Javascript。

它使用mouseup和keyup处理程序和一个可选的intervall来检测变化。 >

  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（）; 
}）; 
 
i f（intervall）setInterval（function（）{
 self.detectResize（）; 
}，intervall）; 
 
} 
返回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; 
} 
}; 
 
返回detectResize; 
 
}）（）; 
  

用法： new detectResize（element-id，intervall in ms or 0，回调函数）

示例：

 < textarea id =mytextarea>< / textarea> 
< script type =text / javascript> 
 var mytextarea = new detectResize（'mytextarea'，500，function（）{
 alert（'changed'）; 
}）; 
< / script> 
  

请参阅 jsfiddle.net/pyaNS 。

I want to notify when the size of textarea changes, what event happens at that time, how can I detect it?

解决方案

Here is a small example using pure (without jQuery etc. dependencies) Javascript.

It's using mouseup and keyup handlers and an optional intervall to detect changes.

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;

})();

Usage: new detectResize(element-id, intervall in ms or 0, callback function)

Example:

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

See it in action on jsfiddle.net/pyaNS.

这篇关于如何检测纯JavaScript的textarea大小更改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！