Question

我有一个包含几个页面的网站，每个页面包含两个textareas。我试图做的就是获取它，以便当用户调整其中一个文本框的大小时，另一个文本框的大小调整。

这是我迄今为止所做的尝试：

尝试＃1

$(document).ready(function(){
    var taheight;
    $('textarea').resize(function(){
        taheight = $(this).height();
        $('textarea').not(this).css('height',taheight);
    });
});

我还尝试了.on('resize', function()...和其他一些变体，然后才意识到由于textareas上的resize功能是浏览器控件而不是DOM的一部分，因此无法以这种方式完成。< / p>

然后我找到了这个jsFiddle：jsfiddle.net/gbouthenot/D2bZd/

我尝试修改它并想出了这个：

$(document).ready(function(){

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

        var resizeEvent = function() {
            dest.outerHeight(source.outerHeight());
        };

        source.on("mousedown", function(e) {
            resizeInt = setInterval(resizeEvent, 1000/30);
            thisTextArea = $(this).attr('id');
        });

        $(window).on("mouseup", function(e) {
            if (resizeInt !== null) {
                clearInterval(resizeInt);
            }
            resizeEvent();
        });
    };

    textareaResize($("#" + thisTextArea), $("textarea"));

});

但那不会得到目标textarea的id。我也试过了thisTextArea = e.target.id，但那也不行。

帮助！我哪里出错？

Answer 1

您可以使用jQuery UI resizable()并从中调用resize事件。

$("textarea").resizable({
  resize: function() {
    //To get the id of the textarea being resized
    var id = $(this).find('textarea').attr('id');
    //You could also just put the resize function code here
  }
});

jQuery UI Resizable

调整一个textarea的大小？

1 个答案: