时间戳

首页 > 解决方案 > 物化 textarea 标签在固定高度上不可滚动

html - 物化 textarea 标签在固定高度上不可滚动

问题描述

我对与 materialize.css 库一起使用的 textarea 标记有疑问

当前行为

当我们放置更多文本时，文本区域会扩大

期望的行为

我想要一个固定高度的文本区域，当我插入一个大的文本高度时保持原样并且 textarea 变得可滚动

$('#textarea1').val('');
$('#textarea1').bind('input propertychange', function() {
  M.textareaAutoResize($('#textarea1'));
});
<textarea id="textarea2" rows="10" cols="50" style="height: 100px;"></textarea>


<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-field col s12">
  <textarea id="textarea1" style="height: 100px;" class="materialize-textarea"></textarea>
  <label for="textarea1">Textarea</label>
</div>

上面的截图中提出的问题，我需要的是一个像普通的文本区域，它在大文本上添加一个滚动。

我通过了文档，在 textarea 上唯一提到的是这个

高级说明：当使用 jQuery 的 .val() 等方法动态更改 textarea 的值时，您必须在其后触发自动调整大小，因为 .val() 不会自动触发我们绑定到 textarea 的事件。

有什么方法可以使用自定义 css 使 textarea 可滚动，甚至可以单独通过库更好地滚动？

标签： htmlcsstextareamaterialize

解决方案

设置heightoftextarea并用 覆盖它!important。这将确保 textarea 不会调整大小。对于滚动部分，添加rows和oninput属性。oninput每次元素的值发生变化时触发，即使它仍然处于焦点状态。

阅读更多：https ://html.com/attributes/textarea-onchange/#ixzz5RoZe3nfp

在materialize.css文件的 class 中textarea.materialize-textarea，您会发现它overflow-y设置为hidden. 因此在rows、lineCount 和 overflow-y的帮助下，可以实现具有固定高度的可滚动物化文本区域。

HTML -

<div class="row">
    <form class="col s12">
        <div class="row">
            <div class="input-field col s12">
                <textarea id="textarea1" class="materialize-textarea" rows="5" oninput="changedValue()"></textarea>
                <label for="textarea1">Textarea</label>
            </div>
        </div>
    </form>
</div>

CSS -

textarea {
    height: 8rem !important;
}

JS-

function changedValue() {
    let text = document.getElementById("textarea1");
    let textValue = text.value;
    let row = text.getAttribute('rows');
    let lines = textValue.split(/\r|\r\n|\n/);
    let count = lines.length;
    if (count >= row) {
        text.style.overflowY = "scroll";
    }
    else if (count < row) {
        text.style.overflowY = "hidden";
    }
}

学分 - Ir Calif - 行数

推荐阅读