如何使textarea自动水平调整大小以适合输入的文本？

I have two divs side by side, both with textareas. I want their content to line up exactly, line by line. So instead of the text wrapping if a line gets to long, I'd rather the textarea just get wider.

我有两个div并排,都有textareas。我希望他们的内容能够一行一行排列。因此,如果一条线变长,而不是文本包装,我宁愿textarea更宽。

I'm not sure what to calculate though to see if a line has gotten too big.

我不知道要计算什么,看看是否有一条线太大了。

4 个解决方案

#1

Given this HTML:

鉴于此HTML:

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

you can try with the following JS + jQuery:

你可以尝试使用以下JS + jQuery:

var minCol = $('#theID').attr('cols');;
$('#theID').keyup(updateCols);

function updateCols() {
    var lines = $('#theID').val().split(/\n/);
    var lineMaxLenght = getLineMaxLenght(lines);
    if (lineMaxLenght >= minCol) {
        $('#theID').attr('cols', lineMaxLenght);
    }
}

function getLineMaxLenght(lines) {
    var max = -1;
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].length > max) {
            max = lines[i].length;
        }
    }
    return max;
}

You can improve getLineMaxLenght using some other library

您可以使用其他库来改进getLineMaxLenght

#2

FIDDLE
Demo from impressive webs

FIDDLE令人印象深刻的网络演示

HTML

<p>Code explanation: <a href="http://www.impressivewebs.com/textarea-auto-resize/">Textarea Auto Resize</a></p>

<textarea id="comments" placeholder="Type many lines of texts in here and you will see magic stuff" class="common"></textarea>

/*global document:false, $:false */
var txt = $('#comments'),
    hiddenDiv = $(document.createElement('div')),
    content = null;

txt.addClass('txtstuff');
hiddenDiv.addClass('hiddendiv common');

$('body').append(hiddenDiv);

txt.on('keyup', function () {

    content = $(this).val();

    content = content.replace(/\n/g, '<br>');
    hiddenDiv.html(content + '<br class="lbr">');

    $(this).css('height', hiddenDiv.height());

});

CSS

body {
     margin: 20px;
}

p {
    margin-bottom: 14px;
}

textarea {
    color: #444;
    padding: 5px;
}

.txtstuff {
    resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
    overflow: hidden;
}

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}

/* the styles for 'commmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.common {
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    overflow: hidden;
}

.lbr {
    line-height: 3px;
}

#3

if you want to resize the width of a textarea you need to change the "cols" attribute.

如果要调整textarea的宽度,则需要更改“cols”属性。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $("#txtarea").keyup(function(){
        if($("#txtarea").val().length > 20){
            $("#txtarea")[0].cols = $("#txtarea").val().length;
        }
        });
    });
</script>
</head>
<body>


<textarea id="txtarea"></textarea>
</body>
</html>

Try this. Also i posted this jsFiddle (http://jsfiddle.net/xPCB4/) so you can see it in action. I hope this is what you needed.

试试这个。我也发布了这个jsFiddle(http://jsfiddle.net/xPCB4/),所以你可以看到它在行动。我希望这就是你所需要的。

#4

-1

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

#1