Google材料設計在打字時種植文字區

我試圖在我的表格中實施Google Material Design Guidelines，它的效果很好，直到我碰到文字區。我想要的是：當你只關注textarea時，只有一行，但當你到達行尾時（輸入時），它會自動添加另一行並繼續在那裏輸入。Google材料設計在打字時種植文字區

我在codepen上找到了這個，但是這使用了一個inputfield而不是textarea。這只是水平滾動... Demo

<input type="text" required>

任何人誰擁有這些代碼，並願意分享？謝謝

來源

2015-06-07 nclsvh

您正在自己創建所有Material Design CSS & Jquery？

否則，我發現材料設計的textarea就像你在這裏提到：

來源：http://materializecss.com/forms.html

檢查了他們的Textarea一部分。

來源

2015-06-08 03:05:09 yeyene

哦，這是偉大的人，謝謝。正是我在找什麼！我自己寫這篇文章，但是通過這個我可以將它調整到我喜歡的位置。不能相信我在搜索時從來沒有遇到過這個網站。 – nclsvh

好消息！現在Google正在爲網站提供他們的MD框架（比如Bootstrap）。看看這裏... http://www.getmdl.io/components/index.html – yeyene

實際上，爲了獲得這個級別的控制權，並且解決了大多數網頁瀏覽器上的textarea可以手動調整大小的問題，您需要使用一個帶有the contenteditable attribute的div。

查看HTML doctor entry on contenteditable瞭解更多。另外，要計算字體大小和溢出，您可能需要使用the canvas measureText method，例如使用畫布作爲屏幕外替換（您輸入的內容與您的contenteditable元素中輸入的文本完全相同）。

最後，雖然css lineHeight屬性可以在某種程度上促進這些計算，但有一些JavaScript庫專門用於此目的。我發現Font.js，在撰寫本文時尚未測試。

來源

2015-12-19 10:43:57 Argo

沒錯。一個textarea只會帶你到目前爲止，甚至像materialize.css這樣的框架通過使用一個textarea而不是一個contenteditable div來限制你。你知道一種方式來創造一個自信的div工作/行爲視覺材料textarea相同的方式嗎？我試圖通過增加功能來實現材質效果（突出顯示超出文字限制的額外字符等），但迄今尚未成功。 –

對不起，還沒有看過那部分。 – Argo

Google材料設計在打字時種植文字區

回答

相關問題