Materialise textarea 标签在固定高度上不可滚动

Question

我对与 materialize.css 库一起使用的 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>

上面的snipper出现的问题，我需要的是一个像普通的textarea，在大文本上添加一个滚动。

我通过了 documentation，textarea 上唯一提到的是这个

advanced note: When dynamically changing the value of a textarea with methods like jQuery's .val(), you must trigger an autoresize on it afterwords because .val() does not automatically trigger the events we've binded to the textarea.

有什么方法可以使 textarea 可以使用自定义 css 滚动，或者仅通过库就可以更好？

Answer 1

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

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

在materialize.css文件中，在classtextarea.materialize-textarea中，你会发现overflow-y设置为hidden。所以借助rows、lineCount和overflow-y，可以实现固定高度的scrollable materialize textarea

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 - For line count

Materialise textarea 标签在固定高度上不可滚动

Materialize textarea tag is not scrollable on fixed height

html

css

textarea

materialize

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