Question

我能够根据行数增加textarea的大小，但是我没有按回车键只输入文本然后它不起作用并且textarea的大小不起作用。请参阅以下小提琴。

XtraGrid

$("textarea").on("keyup", function($event) {
        this.rows = (this.value.split("\n").length||1);
        var thisTextArea = $event.currentTarget;
                if (thisTextArea.value.split("\n").length > 5) {
                    thisTextArea.rows = (thisTextArea.value.split("\n").length);
                    $(thisTextArea).css("overflow-y","hidden");
                    if (thisTextArea.rows > 15) {
                        $(thisTextArea).css("overflow-y","scroll");
                    }
                }
                else {
                    thisTextArea.rows = 6;
                    $(thisTextArea).css("overflow-y","hidden");
                }
    });

Fiddle Link

Answer 1

$(document)
    .one('focus.textarea', '.autoExpand', function(){
        var savedValue = this.value;
        this.value = '';
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
    })
    .on('input.textarea', '.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0,
            rows;
        this.rows = minRows;
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
        this.rows = minRows + rows;
    });

<强> HTML

<textarea rows="5"class='autoExpand'></textarea>

<强> CSS

textarea{  
  display:block;
  box-sizing: padding-box;
  overflow:hidden;

  padding:10px;
  width:250px;
  font-size:14px;
  margin:50px auto;
  border-radius:8px;
  border:6px solid #556677;
}

link here

Answer 2

Finalaly我这样做了。请参阅以下链接。

$("textarea").on("keyup",function($event) {
                 var textarea = $event.currentTarget;

    if (textarea.scrollHeight > 305) {
            textarea.style.height = "1px";
    textarea.style.height = (3+textarea.scrollHeight)+"px";
        $(textarea).css("overflow-y","scroll");

    }
    else if (textarea.scrollHeight > 105){
        $(textarea).css("overflow-y","hidden");
        textarea.style.height = "1px";
        textarea.style.height = (3+textarea.scrollHeight)+"px";
    }
                 });
$("textarea").on("focus",function($event) {
    var textarea = $event.currentTarget;
        if (textarea.scrollHeight > 105) {
            //textarea.style.height = textarea.scrollHeight;
            $(textarea).css("height",textarea.scrollHeight);
            if(textarea.scrollHeight > 305) {
            $(textarea).css("overflow-y","scroll");
            }
        }
    $( "textarea" ).unbind("focus");

});

https://jsfiddle.net/xwkw3a2r/1/

Answer 3

https://github.com/mbklein/jquery-elastic/blob/master/index.html

$(document).ready(function() {
  $('textarea').elastic();
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Demo - Elastic</title>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <link href="https://raw.githubusercontent.com/mbklein/jquery-elastic/master/dependencies/screen.css" type="text/css" rel="stylesheet" />
</head>

<body>

  <div class="form">
    <p>
      <label>Fill the textarea to make it grow</label>
      <span class="w">
					<textarea class="input">This textarea is going to grow when you fill it with text. Just type a few more words in it and you will see.</textarea>
				</span>
    </p>
  </div>
  <script src="https://raw.githubusercontent.com/mbklein/jquery-elastic/master/jquery.elastic.js" type="text/javascript"></script>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

</html>

Answer 4

更新html

<textarea rows="5" cols="15"></textarea>

使用此js片段

$("textarea").on("keyup", function($event) {
    var textarea = $(this);
    var text = textarea.val();
    var lines = text.split(/\r*\n/);
    var cols = textarea.attr('cols');
    var TOTAL_LINES = 0;
    for (var i = 0; i < lines.length; i++) {
        TOTAL_LINES += Math.ceil(lines[i].length/cols);
    }    
    console.log(TOTAL_LINES);
    if (TOTAL_LINES > 5) {
        textarea.attr('rows', TOTAL_LINES);
        textarea.css("overflow-y","hidden");
        if (TOTAL_LINES > 15) {
            textarea.css("overflow-y","scroll");
        }
    } else {
       textarea.attr('rows', 6);
        textarea.css("overflow-y","hidden");
    }
});

以编程方式增加textArea的大小

4 个答案: