jQuery: Textareas et redimensionnement des événements Chrome

Question

Chrome rend les zones de texte redimensionnables par défaut. Comment puis-je associer des événements aux événements de redimensionnement pour les zones de texte? Faire le naïf $('textarea').resize(function(){...}) ne fait rien.

Answer 1

Il ne semble pas que vous puissiez attacher spécifiquement des événements au redimensionnement d'une zone de texte. L'événement de redimensionnement se déclenche lorsque la fenêtre est redimensionnée.

Answer 2

Je ne peux pas tester ce moment, mais selon this forum entry il peut être désactivé à l'aide:

style="resize: none;" 

contrairement a déclaré dans cette entrée, max-width et max-height ne sera pas coupé - grâce à Sampson @ Jonathan pour l'info.

Answer 3

Voici un plugin jQuery écrit en utilisant CoffeeScript. Idée de Jonathan Sampson.

$.fn.sizeId = ->               
    return this.height() + "" + this.width()        

$.fn.textAreaResized = (callback) ->          
    this.each ->               
     that = $ this              
     last = that.sizeId() 
     that.mousedown ->             
      last = that.sizeId()           
     that.mousemove ->             
      callback(that.get(0)) if last isnt that.sizeId()    

Vous pouvez le construire à Javascript sur la page d'accueil de CoffeeScript

http://jashkenas.github.com/coffee-script/

Utilisez le bouton "Try CoffeeScript".

Answer 4

Il est jquery-redimensionne qui, une fois inclus juste fait votre travail de ligne donnée: http://benalman.com/projects/jquery-resize-plugin/

Answer 5

similaires à la réponse de Epeli J'ai essayé de commencer sur une solution propre pour déclencher un événement Resize() sur mousedown: http://jsfiddle.net/cburgmer/jv5Yj/3/ Cependant, cela ne fonctionne qu'avec Firefox car Chrome ne semble pas déclencher la souris sur le gestionnaire de redimensionnement. Cependant, il déclenche le mouseup.

Answer 6

Ceci est une vieille question, mais quelqu'un d'autre a eu le même IRC, alors j'ai décidé de le résoudre ici: http://jsfiddle.net/vol7ron/Z7HDn/

droit de toute personne que Chrome ne prend pas en cas de modification de taille et que Chrome ne fonctionne pas capturer le mousedown, de sorte que vous devez définir l'état d'initialisation, puis gérer les changements par mouseup:

jQuery(document).ready(function(){ 
    // set init (default) state 
    var $test = jQuery('#test'); 

    $test.data('w', $test.outerWidth()); 
    $test.data('h', $test.outerHeight()); 

    $test.mouseup(function(){ 
     var $this = jQuery(this); 
     if ( $this.outerWidth() != $this.data('w') 
     || $this.outerHeight() != $this.data('h') 
     ) 
     alert($this.outerWidth() + ' - ' + $this.data('w') + '\n' 
       + $this.outerHeight() + ' - ' + $this.data('h')); 

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

}); 

HTML

<textarea id="test"></textarea>