Textarea 使用 .attr() 更新在输入和按键时增加 ++ 一行答案

【问题标题】：Textarea increase ++ one row on enter and keypress using .attr() updateTextarea 使用 .attr() 更新在输入和按键时增加 ++ 一行
【发布时间】：2015-04-29 12:49:34
【问题描述】：

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

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

二：使用keypress == 13时

第三个：当文本进入另一行时输入

到目前为止，我已经实现了这一点，但并没有真正发挥作用：|

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”。

【问题讨论】：

对于您的按键，该格式看起来错误。这是代表的格式。试试 $("textarea").on('keypress', function(e){ if (e.keyCode == 13) { ... }});
Auto expand a textarea using jQuery 的可能重复项
@Taplar .on( "keypress", handler ) 在 jQuery 事件上似乎没问题
@mcmwhfy 是对的，但在他的示例中，他有 .on("keypress", keynum, function() {}) 所以如果他试图让按下的键号像这样传递，而不是那样一个选择器，那么这将不起作用。开，对不起，大声笑，错过了你是最初的海报。

标签： javascript jquery html textarea

【解决方案1】：

来自https://stackoverflow.com/a/10080841/4801673

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

【讨论】：

【解决方案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 中删除行，则减小大小。如果没有在 textarea 中添加/删除行，则无需执行任何操作。

【讨论】：