以编程方式增加textArea的大小

Question

I am able to increase the size of textarea according to Number of lines, but supose I did not press enter and simply enter text then it does not work and size of textarea does not work. 我可以根据行数来增加textarea的大小，但是我没有按Enter键，只是输入了文本，所以它不起作用，textarea的大小也不起作用。 See the following fiddle. 请参阅以下小提琴。

 $("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"); } });

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

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 HTML

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

css 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 I have done this way. 最后，我这样做了。 See following Link. 请参阅以下链接。

$("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/ https://jsfiddle.net/xwkw3a2r/1/

Answer 3

https://github.com/mbklein/jquery-elastic/blob/master/index.html 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

Update html 更新HTML

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

Use this js snippet 使用此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 个解决方案

解决方案1
2 2015-05-26 05:27:03

解决方案2
2 2015-05-27 08:59:51

解决方案3
1 2015-05-26 05:09:30

解决方案4
0 2015-05-26 05:15:24

以编程方式增加textArea的大小

问题描述

4 个解决方案

解决方案1 2 2015-05-26 05:27:03

解决方案2 2 2015-05-27 08:59:51

解决方案3 1 2015-05-26 05:09:30

解决方案4 0 2015-05-26 05:15:24

解决方案1
2 2015-05-26 05:27:03

解决方案2
2 2015-05-27 08:59:51

解决方案3
1 2015-05-26 05:09:30

解决方案4
0 2015-05-26 05:15:24