文本区域增加 ++ 使用 .attr() 更新输入和按键时的一行

Question

我有一个文本区域，我想在每次输入时用一行增加他的高度，每次输入时文本进入另一行。所以我有 3 个条件，当显示时我想对所有使用的行进行编号并根据此设置行高：

one: var countRows = $("textarea").val().split(/\r|\r\n|\n/).length;

two: when keypress == 13 is used

and three: when text it goes into another row wile typing

直到现在我已经实现了这个但并没有真正起作用:|

var countRows = $("textarea").val().split(/\r|\r\n|\n/).length;   
var keynum = 13; //enter keynum

//for default state
//not calculating 
$("textarea").attr("rows", countRows + 1);

//for enter key 
//not really working
$("textarea").on('keypress', keynum, function() {
   $(this).attr("rows", countRows + 1);
     // alert("jjj");
});

//for case whentext it goes into another row wile typing

我只想使用 .attr() 并在添加或删除一行时更新该属性 "rows"。

Answer 1

来自

$("textarea").keyup(function(e) {
    while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
        $(this).height($(this).height()+1);
    };
});

Answer 2

$('textarea').keyup(function(e) {
    var $lineHeight = $(this).height() / $(this).get(0).rows;
    var $lines = $(this).val().split(/\r|\r\n|\n/).length;
    $(this).get(0).rows = $lines;
});

如果向文本区域添加新行，请增加大小。如果从 textarea 中删除行，则减小大小。如果 textarea 中的行不是 added/removed，则无需执行任何操作。

文本区域增加 ++ 使用 .attr() 更新输入和按键时的一行

Textarea increase ++ one row on enter and keypress using .attr() update

html

javascript

jquery

textarea