input與textarea的區別，並用div模擬textarea

1、input 和 textarea 的區別

input：

HTML <input> 元素用於爲基於Web的表單建立交互式控件，以便接受來自用戶的數據。

<input type="range" name="range" value="2" min="0" max="100" step="10">
<input type="file" name="file" accept="image/*">
<input type="month" name="month" value="2017-11">

textarea：

HTML <textarea> 元素表明一個多行的純文本編輯控件.

<textarea name="textarea" rows="10" cols="50">
    Write something here
</textarea>

區別：

1. <textarea>標籤是成對的，有結束標籤進行閉合，標籤的內容寫在標籤對中間；<input>是單個標籤，標籤的內容經過 value 屬性設置；
2. <textarea>的值是純文本；<input>的值根據類型不一樣而不一樣；
3. <textarea>沒有type屬性；<input>有多種type來知足表單與用戶的數據交互；
4. <textarea>的值能夠是多行的，而且有rows和cols來控制多行結構；<input>的值是單行的；

2、用 div 模擬 textarea 標籤

步驟：

1. 給 div 添加一個HTML全局屬性：contenteditable="true"，使 div 元素變成用戶可編輯的;
2. 給 div 添加樣式 resize: vertical;，使 div 能夠被用戶調整尺寸，注意：別忘了設置 overflow: auto; 樣式，由於resize樣式不適用於overflow: visible;的塊，否則 resize 不起效哦；
3. 增長一個屬性：placeholder="I am placeholder"；
4. 經過 CSS 選擇器獲取並顯示 placeholder 的值；

直接上代碼：

<div class="textarea" contenteditable="true" placeholder="This is placeholder"></div>

.textarea {
  height: 200px;
  width: 300px;
  padding: 4px;
  border: 1px solid #888;
  resize: vertical;
  overflow: auto;
}

.textarea:empty:before {
  content: attr(placeholder);
  color: #bbb;
}

效果：

歡迎交流，歡迎交朋友。