自动调整文本区域的大小添加了太多额外的行

Question

我有一个 jQuery 编码文本区域，将字符限制为每行 11 个字符，并且自动调整大小取决于行数。

当点击回车键添加新行时，它会添加 2 或 3 行（它应该只添加 1 行）并且随着用户点击 'Enter'，数字不断增加。

$(document).ready(function(){
    var textArea = $('#foo');
    //var maxRows = textArea.attr('rows');
    var maxChars = textArea.attr('cols');
    textArea.keypress(function(e){
        var text = textArea.val();
        var lines = text.split('\n');
       if (e.keyCode == 13){
           //return lines.length < maxRows;
        }
        else{ //Should check for backspace/del/etc.
            var caret = textArea.get(0).selectionStart;
            console.log(caret);
            
            var line = 0;
            var charCount = 0;
            $.each(lines, function(i,e){
                charCount += e.length;
                if (caret <= charCount){
                    line = i;
                    return false;
                }
                //\n count for 1 char;
                charCount += 1;
            });
                   
            var theLine = lines[line];
            return theLine.length < maxChars;
        }
    });
    
});

// Applied globally on all textareas with the "autoExpand" class
$(document)
    .one('focus.autoExpand', 'textarea.autoExpand', function(){
        var savedValue = this.value;
        this.value = '';
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
    })
    .on('input.autoExpand', 'textarea.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0, rows;
        this.rows = minRows;
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 17);
        this.rows = minRows + rows;
    });

.ta { 
    background-color:#d5d5d5;
    padding:10px;
}

#foo { 
    background: transparent url(http://s24.postimg.org/62v2ipx81/underline.png) repeat; 
    border:none;
    display:block;
    font-size:18px;
    box-sizing: content-box;
    height:auto;
    width:300px;
    overflow:hidden;
    line-height:30px;
    font-weight:bold;
    white-space: nowrap;
    color:black;
    resize: none;
    outline-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ta">
    I like my name because:<br />
<textarea id="foo" class="autoExpand" cols="11" var rows="3" data-min-rows="3"></textarea>
<br />
</div>

代码在JSfiddle here

Answer 1

你除以 17 但行高是 30

rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 30);

I saw that baseScrollHeight is 89 and the difference increases always by 29

Fiddle 这里 ==> http://jsfiddle.net/qx4qknfb/

自动调整文本区域的大小添加了太多额外的行

Auto-resize textarea adds too many extra lines

javascript

jquery

textarea