Как создать текстовую область с CSS3?

Учитывая текстовое поле, которое начинается с небольшого прямоугольника, одной строки, возможно, если CSS3 автоматически вырастет, чтобы иметь несколько строк, поскольку пользователь вводит несколько строк до тех пор, пока не будет указано заданное ограничение (300 пикселей), когда появится полоса прокрутки с переполнение автоматически со всеми входами?

Ответ 1

Да, вы можете использовать css3. Возможно, вам придется прикрепить их к браузеру.

textarea { 
    resize: both; 
} /* none|horizontal|vertical|both */
textarea.vert { 
    resize: vertical; 
}
textarea.noResize { 
    resize: none; 
}

Затем вы можете ограничить их максимальными высотами и ширинами, используя:

textarea { 
    resize: vertical; 
    max-height: 300px; 
    min-height: 200px; 
}
textarea.horiz { 
    resize: horizontal; 
    max-width: 400px; 
    min-width: 200px;
}

Я вытащил их из сообщения, на которое я ссылался в прошлом:

Настроить изменение области текста с помощью CSS

Ответ 2

К сожалению, кажется, что вы не можете сделать это только с CSS3.

Но, там есть альтернатива 3.2k с минимальной версией JS.

Здесь ссылка , включая демонстрацию и использование.

Вы можете установить его, выполнив npm install autosize и используя этот способ

autosize(document.querySelector('.yourTextAreaClass'));

Или стиль jQuery

autosize($('.yourTextAreaClass'));

И это работает как шарм. Он легкий и имеет естественное ощущение, в отличие от многих авторезистов, которые делают бесполезную анимацию.

Ответ 3

Невозможно использовать только CSS, насколько мне известно, но здесь супер миниатюрная директива Angular, которая работает только путем проверки новых строк. Вы можете легко настроить его, чтобы иметь максимальные строки и т.д.

angular.module('Shared.AutoGrow.Directive', [])
.directive('autoGrow', function() {
  return {
    restrict: 'A',
    link(scope, element) {
      element.on('input change', () => {
        const text = element[0].value;
        const lines = 1 + (text.match(/\n/g) || []).length;
        element[0].rows = lines;
      });
    },
  };
});

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