Événement de redimensionnement pour le textarea ?

Question

Les versions actuelles de Firefox et de Chrome comprennent un gestionnaire de glisser-déposer permettant de redimensionner une page Web. <textarea> boîte. J'ai besoin de capturer l'événement de redimensionnement, je pensais que ce serait facile avec la fonction jQuery resize() mais ça ne marche pas !

J'ai également essayé la méthode normale onResize mais le résultat est le même. Vous pouvez l'essayer sur JSFiddle .

Y a-t-il un moyen de le capturer ?

Answer 1

Chrome ne capture pas l'événement de redimensionnement et Chrome ne capture pas l'événement de descente de souris. Vous devez donc définir l'état d'initialisation, puis gérer les changements par le biais de la montée de souris :

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

   // store 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') )
      {
          // Resize Action Here
          alert( $this.outerWidth()  + ' - ' + $this.data('x') + '\n' 
               + $this.outerHeight() + ' - ' + $this.data('y')
               );
      }

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

});

HTML

<textarea></textarea>
<textarea></textarea>

Vous pouvez tester sur JSFiddle

Note :

1. Vous pouvez joindre votre propre redimensionnement comme l'a fait Hussein, mais si vous voulez l'original, vous pouvez utiliser le code ci-dessus.
2. Comme le mentionne Bryan Downing, cela fonctionne lorsque vous faites un mouseup alors que votre souris se trouve au-dessus d'une zone de texte ; cependant, il y a des cas où cela ne se produit pas, comme lorsqu'un navigateur n'est pas maximisé et que vous continuez à faire glisser la souris au-delà de la portée du navigateur, ou lorsque vous utilisez resize:vertical pour verrouiller le mouvement.

Pour quelque chose de plus avancé, il faudrait ajouter d'autres écouteurs, éventuellement une file d'attente et des scanners d'intervalles ; ou utiliser le déplacement de la souris, comme le fait, je crois, jQuery resizable - la question est alors de savoir dans quelle mesure vous privilégiez les performances par rapport à l'esthétique.

---

Mise à jour : L'interface utilisateur de Browsers a été modifiée depuis. Désormais, un double-clic sur le coin peut contracter la zone de texte à sa taille par défaut. Il se peut donc que vous deviez également capturer les changements avant/après cet événement.

Answer 2

J'ai un peu modifié la réponse de vol7ron, et j'ai simplement remplacé l'action "Redimensionner ici" par un simple déclencheur de l'événement "redimensionnement" normal, de sorte que vous pouvez attacher ce que vous voulez à l'événement de redimensionnement "comme d'habitude" :

$(document).ready(function(){
    $('textarea').bind('mouseup mousemove',function(){
        if(this.oldwidth  === null){this.oldwidth  = this.style.width;}
        if(this.oldheight === null){this.oldheight = this.style.height;}
        if(this.style.width != this.oldwidth || this.style.height != this.oldheight){
            $(this).resize();
            this.oldwidth  = this.style.width;
            this.oldheight = this.style.height;
        }
    });
});

J'ai ajouté l'événement mousemove pour que le redimensionnement se déclenche également lorsque vous faites glisser la souris pendant le redimensionnement, mais gardez à l'esprit qu'il se déclenche très souvent lorsque vous déplacez la souris.

dans ce cas, vous pourriez vouloir retarder un peu le déclenchement ou le traitement de l'événement de redimensionnement, par ex. remplacer ce qui précède :

$(this).resize();

avec :

if(this.resize_timeout){clearTimeout(this.resize_timeout);}
this.resize_timeout = setTimeout(function(){$(this).resize();},100);

exemple d'utilisation, faire en sorte que la deuxième zone de texte croisse et décroisse avec la première :

$('textarea').eq(0).resize(function(){
    var $ta2 = $('textarea').eq(1);
    $('textarea').eq(1).css('width',$ta2.css('width')).css('height',$ta2.css('height'));
});

Answer 3

Une autre façon de le faire est de lier l'événement mouseup de la zone de texte. Vous pouvez alors vérifier si la taille a changé.

Answer 4

L'événement de redimensionnement n'existe pas pour le textarea.

Le jQueryPlugin redimensionnable n'est pas natif, nous devons donc utiliser une alternative.

Une façon de l'émuler est d'utiliser l'événement mousedown/click.
Si vous voulez déclencher des événements en temps réel, vous pouvez procéder comme suit :

Mise à jour le 11 novembre 2013 :

// This fiddle shows how to simulate a resize event on a
// textarea
// Tested with Firefox 16-25 Linux / Windows
// Chrome 24-30 Linux / Windows

var textareaResize = function(source, dest) {
    var resizeInt = null;

    // the handler function
    var resizeEvent = function() {
        dest.outerWidth( source.outerWidth() );
        dest.outerHeight(source.outerHeight());
    };

    // This provides a "real-time" (actually 15 fps)
    // event, while resizing.
    // Unfortunately, mousedown is not fired on Chrome when
    // clicking on the resize area, so the real-time effect
    // does not work under Chrome.
    source.on("mousedown", function(e) {
        resizeInt = setInterval(resizeEvent, 1000/15);
    });

    // The mouseup event stops the interval,
    // then call the resize event one last time.
    // We listen for the whole window because in some cases,
    // the mouse pointer may be on the outside of the textarea.
    $(window).on("mouseup", function(e) {
        if (resizeInt !== null) {
            clearInterval(resizeInt);
        }
        resizeEvent();
    });
};

textareaResize($("#input"), $("#output"));

Démo : http://jsfiddle.net/gbouthenot/D2bZd/

Answer 5

Vous devez d'abord rendre la zone de texte redimensionnable avant de déclencher l'événement de redimensionnement. Vous pouvez le faire en utilisant jQuery UI redimensionnable() et à l'intérieur de celui-ci, vous pouvez appeler l'événement de redimensionnement.

$("textarea").resizable({
    resize: function() {
        $("body").append("<pre>resized!</pre>");
    }
});

Consultez l'exemple de travail à http://jsfiddle.net/HhSYG/1/