10

在我的一个页面上，我有一个文本区域 html 标记供用户在其中写信。我希望文本区域下方的内容向下移动，或者换句话说，我希望文本区域在添加每一行时垂直调整大小到文本区域并使下面的内容简单地相对于文本区域的底部定位。

我希望 javascript/jquery 有一种方法可以检测单词何时换行，或者何时添加新行并基于此调整文本区域容器的大小。

我的目标是让文本区域下方的内容与文本底部保持相同的距离，无论用户写了多少。

当文本溢出时，文本区域会创建一个滚动条。

4

4 回答 4

17

由于我对在网上找到的几种解决方案不太满意，因此这是我的看法。

尊重最小高度，最大高度。通过将缓冲区添加到高度（当前为 20，可以用 line-height 替换）来避免跳跃和闪烁滚动条。但是，当达到最大高度时仍会显示滚动条。避免通过逐渐减小 textarea 高度而不是将其设置为 0 来重置容器滚动位置。因此也会同时删除所有已删除的行。无需浏览器嗅探即可在 IE 和 Chrome 中工作。

http://jsfiddle.net/Nd6B3/4/

<textarea id="ta"></textarea>

#ta {
    width:250px;
    min-height:116px;
    max-height:300px;
    resize:none;
}

$("#ta").keyup(function (e) {
    autoheight(this);
});

function autoheight(a) {
    if (!$(a).prop('scrollTop')) {
        do {
            var b = $(a).prop('scrollHeight');
            var h = $(a).height();
            $(a).height(h - 5);
        }
        while (b && (b != $(a).prop('scrollHeight')));
    };
    $(a).height($(a).prop('scrollHeight') + 20);
}

autoheight($("#ta"));
于 2014-03-28T14:41:50.857 回答
10

http://www.jacklmoore.com/autosize/

先下载插件：

第 1 步：将“jquery.autoresize.min.js”放在保存 jquery 插件的位置。

第 2 步：在 HTML 中链接文件 -><script src="jquery.autosize.min.js" type="text/javascript" ></script> 确保此链接位于您的 jquery 链接之后，并且位于您自己的 javascript/jquery 代码链接之前。

第 3 步：在您的 javascript 代码文件中简单地添加$('#containerToBeResized').autosize();

于 2013-10-03T22:45:08.087 回答
3 
$('textarea').keyup(function (e) {
    var rows = $(this).val().split("\n");
    $(this).prop('rows', rows.length);
});

这个工作样本。

于 2014-03-24T11:20:18.250 回答
1

从这个答案中看到这个小提琴。这会根据行数增加文本区域的高度。

我想这就是你所要求的。

从以下答案复制代码：

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>

JS

/*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;
}
于 2013-10-03T22:21:25.643 回答