How to detect textarea size change with pure javascript?

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.

You can use library agnostic JavaScript (assuming you're not using jQuery or are using another library) by doing:

<textarea id="t"></textarea>
<script>
    var t = document.getElementById('t'),
        tHeight = t.clientHeight,
        tWidth = t.clientWidth;

    console.log(t);

    t.onmouseup = function (e) {
        if (tHeight !== t.clientHeight || tWidth !== t.clientWidth ) { 
            console.log('size change');
            tHeight = t.clientHeight;
            tWidth = t.clientWidth;
        }
    };
</script>

I've included a console log of the element so you can see which events you can tap into in your inspector.

You can intercept the mouse events of the user, when he tries to change the size of the textarea.

1: Element.addEventListener("mousedown", event => {}): Start interception.

2: window.addEventListener("mousemove", event => {}): Here a comparison between the previous and the current size of each move event take place.

window.addEventListener("mouseup", event => {}): Stop interception.

demo: https://codepen.io/martinwantke/pen/QaJqgq

Try this Demo.

http://jsfiddle.net/vol7ron/Z7HDn/

jQuery(document).ready(function(){
   var $textareas = jQuery('textarea');

   // set init (default) state   
   $textareas.data('x', $textareas.outerWidth());
   $textareas.data('y', $textareas.outerHeight()); 

   $textareas.mouseup(function(){

      var $this = jQuery(this);

      if (  $this.outerWidth()  != $this.data('x') 
         || $this.outerHeight() != $this.data('y') )
      {
          alert( $this.outerWidth()  + ' - ' + $this.data('x') + '\n' 
               + $this.outerHeight() + ' - ' + $this.data('y')
               );
      }

      // set new height/width
      $this.data('x', $this.outerWidth());
      $this.data('y', $this.outerHeight()); 
   });

});

Cannot make it in pure javascript we must use jQuery

来源：https://stackoverflow.com/questions/16937721/how-to-detect-textarea-size-change-with-pure-javascript

标签

javascript

html

textarea