Google Material Design Growing Textarea при вводе

Question

Я пытаюсь реализовать Google Material Design Guidelines в своих формах, и он отлично работает, пока я не столкнулся с текстовым полем. Я хочу это: Когда вы фокусируетесь на текстовом поле, есть только одна строка, но когда вы достигаете конца строки (при наборе текста), она автоматически добавляет другую строку и продолжает печатать там.

Я нашел это на codepen, но это использует поле ввода, а не текстовое поле. Это просто прокручивается по горизонтали ... Demo

<input type="text" required> 

Любой, кто имеет этот код и готов поделиться? Thanks

Answer 1

Вы создаете весь дизайн материалов CSS & JQuery самостоятельно?

В противном случае, я нашел материал Design текстовое поле, как вы упомянули здесь:

Источник: http://materializecss.com/forms.html

Проверьте свою Textarea часть.

Answer 2

На самом деле, чтобы получить этот уровень контроля и обойти тот факт, что текстовое поле на большинстве веб-браузеров может быть изменено вручную, вы должны использовать div с the contenteditable attribute.

См. HTML doctor entry on contenteditable для получения дополнительной информации.

Далее, чтобы рассчитать размеры шрифта и переполнение, вы можете использовать the canvas measureText method, например, используя холст в качестве замены вне экрана (там, где вы вводите точно тот же текст, который вводится внутри вашего контента, пригодного для контента).

Наконец, в то время как атрибут css lineHeight может несколько облегчить эти вычисления, есть несколько библиотек javascript, которые посвящены этой цели. Я нашел Font.js, не проверял его на момент написания этой статьи.