Question

我目前有一个功能可以在用户在文本区域内单击时增加文本区域的高度。它增加，因此用户可以查看文本区域内的所有内容。它目前工作正常。但我只是设法让它一次在一个文本区域工作。我想更改它，以便只要点击其中一个文本区域，所有文本区域就会同时增加。如果有人能给我一个想法，我会很感激。

当前HTML

<textarea name="xaxis1" id="xaxis1_id" rows="3" cols="20">report
facture
credit
impot</textarea>

<textarea name="yaxis1" id="yaxis1_id" rows="3" cols="20">200
123
231
431</textarea>

<textarea name="yaxis2" id="yaxis2_id" rows="3" cols="20">431
111
666
991</textarea>

当前JavaScript代码

$('#xaxis1_id').click(function()  {   
    resizeTextArea($('#xaxis1_id'));
});             
$('#yaxis1_id').keydown(function(e) {
    resizeTextArea($('#yaxis1_id'));
});        
$('#yaxis2_id').click(function()  {   
    resizeTextArea($('#yaxis2_id'));
});

function resizeTextArea(currentTextArea)  {
  var textAreaElements = currentTextArea.val().split('\n');

  var b=1;
  var totalColumns = currentTextArea.attr('cols');

  for (x=0;x < textAreaElements.length; x++)   {
     if (textAreaElements[x].length >= totalColumns) 
        b+= Math.floor(textAreaElements[x].length/totalColumns);
  }

  b+= textAreaElements.length;

  var totalRows = currentTextArea.attr('rows');
  currentTextArea.attr('rows', b);
}

Answer 1

$( "textarea" ).bind( "click keydown", function() {
   resizeTextArea($this);
});

Answer 2

你可以用这段代码来做到这一点：

$("textarea").on("click keyup", function(event){
    resizeTextArea($(this));
});

请注意，resizeTextArea函数的参数是jQuery对象，而不仅仅是DOM对象。

希望它适合你。

Answer 3

如果你想让它们全部展开，无论何时点击它们都会有效：

View Demo

$('textarea').click(function()  {   
  $('textarea').each(function() {
      resizeTextArea($(this));
  });
});

更新：根据下面的问题，如果点击和打开这个火，你可以这样做：

$('textarea').on("click keydown", function()  {
  $('textarea').each(function() {
    resizeTextArea($(this));
  });
});

更新2：要在“粘贴”事件中调用此方法，请添加setTimeout调用：

$('textarea').on("click keydown paste", function()  {
  setTimeout(function () {
    $('textarea').each(function() {
      resizeTextArea($(this));
    });
  }, 100);
});

Answer 4

在 document.ready 功能中使用以下内容，您可以添加不同的事件 - click，keydown等。

$( "textarea" ).bind( "click", function() {
    $( "textarea" ).each(function( index ) {
            var currentTextArea = $( this );
            var textAreaElements = currentTextArea.val().split('\n');

            var b = 1;
            var totalColumns = currentTextArea.attr('cols');

            for (x = 0; x < textAreaElements.length; x++) {
                if (textAreaElements[x].length >= totalColumns)
                    b += Math.floor(textAreaElements[x].length / totalColumns);
            }

            b += textAreaElements.length;

            var totalRows = currentTextArea.attr('rows');
            currentTextArea.attr('rows', b);
        });
    });

同时更改所有文本区域的大小

4 个答案: