Question

关于与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>

上述狙击手提出的问题是，我需要的是一个像普通文本区域一样的文本区域，可以在大文本上添加滚动条。

我通过了documentation，而在textarea上唯一提及的就是这个

高级说明：当使用jQuery的.val（）之类的方法动态更改文本区域的值时，您必须在其后缀上触发自动调整大小，因为.val（）不会自动触发我们绑定到文本区域的事件。

有什么方法可以通过自定义CSS使textarea滚动，甚至可以通过整个库来更好地滚动？

Answer 1

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

了解更多：https://html.com/attributes/textarea-onchange/#ixzz5RoZe3nfp

在 materialize.css 文件的textarea.materialize-textarea类中，您会发现overflow-y设置为hidden。因此，借助行，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 - For line count

物化textarea标签无法在固定高度上滚动

关于与materialize.css库一起使用的textarea标签，我遇到了一个问题

1 个答案: