前端面試題——div 實現 textarea

如果要實現一個文本框，一般的做法會使使用<textarea></textarea>標籤。但是如果要用<div></div>實現相同的功能，該怎麼做呢？

首先來分析一下，需要通過div來實現哪些textarea的特性

可編輯

textarea 最主要的特性就是可編輯，如果不能編輯還叫什麼文本框呢？

plain-text

文本框中只能夠輸入純文本內容，而類似圖片、視頻這種無法輸入

分析完 textarea 的基本特性以後，就要開始使用 div 來實現啦！

H5 新屬性 —— contenteditable

contenteditable 屬性規定一個元素是否可以被編輯

<div contenteditable="true"></div>n

上面代碼中聲明了一個 div，同時將他的 contenteditable 屬性設置為了 true，這就表示這個 div 元素是可以被編輯的，點擊這個 div，會實現自動聚焦並且可以輸入

但是在實際使用中會發現，將這個屬性設置為 true 以後，可以輸入文字的同時，如果拖入一張圖片，也會將這張圖片顯示出來，這與 textarea 的特性不符，需要將這個富文本的特性禁止

<div contenteditable="plaintext-only"></div>n

將 contenteditable 設置為 plaintext-only 就可以禁止輸入富文本內容啦！

當然，也可以通過 css 的新屬性來設置禁止富文本內容：

.plain-text {n -webkit-user-modify: read-write-plaintext-only;n -moz-user-modify: read-write-plaintext-only;n user-modify: read-write-plaintext-only;n}n

user-modify 的值還有 read-only 和 read-write

以上，我們就實現了一個 textarea 的基本功能了，當然，文本框還有很多其他的特性，例如 placeholder、resize等等，但是在實現文字輸入的基本功能以後，要實現這些功能也並不複雜，不管是通過 css 的方式還是 js 的方式

推薦閱讀：