Тег textarea для материализации не прокручивается на фиксированной высоте - PullRequest
Новая
       7

Тег textarea для материализации не прокручивается на фиксированной высоте

0 голосов
/ 22 сентября 2018

У меня проблема с тегом textarea, используемым вместе с библиотекой materialize.css

Текущее поведение

Текстовая область расширяется при добавлении текста

Желаемое поведение

Я хочу иметь текстовую область фиксированной высотыи когда я вставляю большую текстовую высоту, остается как есть, и текстовая область становится прокручиваемой 

$('#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>

Проблема, представленная на приведенном выше фрагменте, мне нужна текстовая область, аналогичная простой, которая добавляет прокрутку больших текстов.

Я получил документацию , и единственное упоминание о текстовой области - это расширенное примечание

: при динамическом изменении значения текстовой области с помощью таких методов, как jQuery's .val (), вы должнывызвать автоматическое изменение размера послесловия, потому что .val () не вызывает автоматически события, которые мы связали с текстовой областью.

Есть ли способ сделать прокрутку текстовой области с помощью пользовательского CSS или даже лучше с помощью одной библиотеки?

1 Ответ

0 голосов
/ 22 сентября 2018

Установите 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 - Для подсчета строк

...