Element textarea设置高度与滚动条隐藏

Posted 2023-04-06

参考技术A 使用Element textarea时，前后填充内容，其高度和滚动条会发生变化，同时滚动条太丑，想用vue-scroll代替，如何设置textarea 最小高度与隐藏滚动条。

Textarea自动高度[重复]

【中文标题】Textarea自动高度[重复]

【英文标题】：Textarea Auto height [duplicate]

【发布时间】：2013-07-20 06:48:54

【问题描述】：

我想让 textarea 的高度等于其中文本的高度（并移除滚动条）

HTML

<textarea id="note">SOME TEXT</textarea>

CSS

textarea#note 
    width:100%;
    direction:rtl;
    display:block;
    max-width:100%;
    line-height:1.5;
    padding:15px 15px 30px;
    border-radius:3px;
    border:1px solid #F7E98D;
    font:13px Tahoma, cursive;
    transition:box-shadow 0.5s ease;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    font-smoothing:subpixel-antialiased;
    background:linear-gradient(#F9EFAF, #F7E98D);
    background:-o-linear-gradient(#F9EFAF, #F7E98D);
    background:-ms-linear-gradient(#F9EFAF, #F7E98D);
    background:-moz-linear-gradient(#F9EFAF, #F7E98D);
    background:-webkit-linear-gradient(#F9EFAF, #F7E98D);

JsFiddle：http://jsfiddle.net/Tw9Rj/

【问题讨论】：

example

只是在页面加载时，还是在用户编辑内容时动态地？

更合适的解决方案是使用具有默认行为的 contenteditable 标签。 w3schools.com/tags/…

【参考方案1】：

这使用纯 JavaScript 代码。

function auto_grow(element) 
    element.style.height = "5px";
    element.style.height = (element.scrollHeight)+"px";

textarea 
    resize: none;
    overflow: hidden;
    min-height: 50px;
    max-height: 100px;

<textarea oninput="auto_grow(this)"></textarea>

【讨论】：

惊人的香草 js 解决方案！

如果添加一些额外的高度，它将在调整元素大小之前停止文本滚动一瞬间。 (element.scrollHeight+20)+"px";

效果不错，但有初始“跳跃”。添加： if (element.scrollHeight > 80) element.style.height = 5 + "px"; element.style.height = (element.scrollHeight + 10) + "px";帮助。 （最小高度：80px）

我可以建议使用 oninput 吗？和 height = auto 而不是 5px？

简单的内联JS解决方案<textarea class="form-control" onkeyup="$(this).height(5);$(this).height($(this).prop('scrollHeight'))"></textarea>

【参考方案2】：

对于我们这些使用 Angular JS 完成此任务的人，我使用了指令

HTML：

<textarea elastic ng-model="someProperty"></textarea>

JS：

.directive('elastic', [
    '$timeout',
    function($timeout) 
        return 
            restrict: 'A',
            link: function($scope, element) 
                $scope.initialHeight = $scope.initialHeight || element[0].style.height;
                var resize = function() 
                    element[0].style.height = $scope.initialHeight;
                    element[0].style.height = "" + element[0].scrollHeight + "px";
                ;
                element.on("input change", resize);
                $timeout(resize, 0);
            
        ;
    
]);

$timeout 将在 DOM 加载后触发的事件排队，这是获得正确的 scrollHeight 所必需的（否则您将获得undefined）

【讨论】：

亲爱的，谢谢发帖！只是想补充一点，我遇到了一个问题，即删除文本行不会降低足够高的高度（一次 2px，可能与使用引导程序有关）。我先将 resize 函数中的 element[0].style.height 设置为 1px，然后将其设置为 scrollHeight。

对我来说并没有缩小。我添加了几行，因此它会缩小到默认/初始高度。 link: function($scope, element) $scope.initialHeight = $scope.initialHeight || element[0].style.height;var resize = function() element[0].style.height = $scope.initialHeight;element[0].style.height = "" + element[0].scrollHeight + "px";;element.on("blur keyup change", resize);$timeout(resize, 0);

这很棒。当模型发生变化时，我还需要调整大小（我的 cmets 框是动态的）。所以我加了：$scope.$watch(attrs.ngModel, resize);

@Bob element.on("blur keyup change", resize) 应该涵盖模型更改。

经历与@kopi_b 相同的事情——scrollHeight 为 0。当它包含在通过 ngShow 显示/隐藏的祖先元素中时似乎会发生这种情况。

【参考方案3】：

可以用JS来实现。这是使用elastic.js 的“单行”solution：

$('#note').elastic();

更新：好像 elastic.js 已经不存在了，但是如果您正在寻找外部库，我可以推荐autosize.js by Jack Moore。这是工作示例：

autosize(document.getElementById("note"));

textarea#note 
	width:100%;
	box-sizing:border-box;
	direction:rtl;
	display:block;
	max-width:100%;
	line-height:1.5;
	padding:15px 15px 30px;
	border-radius:3px;
	border:1px solid #F7E98D;
	font:13px Tahoma, cursive;
	transition:box-shadow 0.5s ease;
	box-shadow:0 4px 6px rgba(0,0,0,0.1);
	font-smoothing:subpixel-antialiased;
	background:linear-gradient(#F9EFAF, #F7E98D);
	background:-o-linear-gradient(#F9EFAF, #F7E98D);
	background:-ms-linear-gradient(#F9EFAF, #F7E98D);
	background:-moz-linear-gradient(#F9EFAF, #F7E98D);
	background:-webkit-linear-gradient(#F9EFAF, #F7E98D);

<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<textarea id="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</textarea>

也检查这个类似的主题：

Autosizing textarea using Prototype

Textarea to resize based on content length

Creating a textarea with auto-resize

【讨论】：

我想用css来做。

我不确定 CSS 是否可行。

elastic js的链接坏了...

不只是引用一个库，更好的答案是不需要任何外部库。这个答案可能在一段时间内没有帮助任何人。

谢谢你们批评我，但接受它作为答案的决定不是我的，我不介意这是否会被别人接受。我只是尽力而为，并提出了一个现成的解决方案。由于不可能通过 CSS 实现这一点，最终您很可能最终会使用 JS，所以为什么不考虑使用已经编写好的那个。是的，你可以用谷歌搜索它，但我为你做了这项工作。

【参考方案4】：

我使用了jQuery AutoSize。当我尝试使用 Elastic 时，它经常给我虚假的高度（非常高的文本区域）。 jQuery AutoSize 运行良好，没有出现这个问题。

【参考方案5】：

我看到已经回答了这个问题，但我相信我有一个简单的 jQuery 解决方案（甚至不需要 jQuery；我只是喜欢使用它）：

我建议计算textarea 文本中的换行符，并相应地设置textarea 的rows 属性。

var text = jQuery('#your_textarea').val(),
    // look for any "\n" occurences
    matches = text.match(/\n/g),
    breaks = matches ? matches.length : 2;

jQuery('#your_textarea').attr('rows',breaks + 2);

【讨论】：

这很漂亮。这似乎工作得很好： textarea.on('input propertychange keyup change', function() this.rows = this.value.match(/\n/g).length + 1 )

很好的解决方案。请注意，它不适用于使用display:block的人。

除非文本换行不起作用。如果文本换行，则文本的行数不等于换行符的数量，因为换行会导致在单词之间的空白处换行。

【参考方案6】：

Jsfiddle

textarea#note 
    width:100%;
    direction:rtl;
    display:block;
    max-width:100%;
    line-height:1.5;
    padding:15px 15px 30px;
    border-radius:3px;
    border:1px solid #F7E98D;
    font:13px Tahoma, cursive;
    transition:box-shadow 0.5s ease;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    font-smoothing:subpixel-antialiased;
    background:-o-linear-gradient(#F9EFAF, #F7E98D);
    background:-ms-linear-gradient(#F9EFAF, #F7E98D);
    background:-moz-linear-gradient(#F9EFAF, #F7E98D);
    background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
    background:linear-gradient(#F9EFAF, #F7E98D);
    height:100%;

html
    height:100%;

body

   height:100%;    

或javascript

var s_height = document.getElementById('note').scrollHeight;
document.getElementById('note').setAttribute('style','height:'+s_height+'px');

Jsfiddle

【讨论】：

这行不通。我的 textarea 父母不是身体。它在 wordpress 管理面板的 div 中。

如果你要给你的父母一个“身高”，它会得到你父母的height。在你的 jsfiddle 中，它 100% 的身体 height + padding 你给了

知道了，刚刚更新了答案

【参考方案7】：

var minRows = 5;
var maxRows = 26;
function ResizeTextarea(id) 
    var t = document.getElementById(id);
    if (t.scrollTop == 0)   t.scrollTop=1;
    while (t.scrollTop == 0) 
        if (t.rows > minRows)
                t.rows--; else
            break;
        t.scrollTop = 1;
        if (t.rows < maxRows)
                t.style.overflowY = "hidden";
        if (t.scrollTop > 0) 
            t.rows++;
            break;
        
    
    while(t.scrollTop > 0) 
        if (t.rows < maxRows) 
            t.rows++;
            if (t.scrollTop == 0) t.scrollTop=1;
         else 
            t.style.overflowY = "auto";
            break;
        
    

【参考方案8】：

html

<textarea id="wmd-input" name="md-content"></textarea>

js

var textarea = $('#wmd-input'),
    top = textarea.scrollTop(),
    height = textarea.height();
    if(top > 0)
       textarea.css("height",top + height)
    

css

#wmd-input
    width: 100%;
    overflow: hidden;
    padding: 10px;