div實現input

LJTin發表於2018-11-19

一、input和textarea的區別

1.input標籤用於為基於Web表單建立互動式控制元件，以便接收來自使用者的資料

2.textarea標籤代表一個多行的純文字編輯控制元件

區別：

1.<textarea>標籤是成對的，有結束標籤進行閉合，標籤的內容寫在標籤對中間，<input>是單標籤，標籤的內容通過value屬性設定

2.<textarea>的值是純文字，<input>的值根據型別不同而不同

3.<textarea>沒有type屬性，<input>有多種type來滿足表單與使用者的資料互動

4.<textarea>的值可以是多行的，並且有rows和cols來控制多行結構，<input>的值是單行的

二、用 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 的值；(無效，暫無發現解決方案)

.textarea {
    height: 200px;
    width: 300px;
    padding: 4px;
    border: 1px solid #888;
    resize: vertical;
    overflow: auto;
}
.textarea:empty:before { //無效
  content: attr(placeholder);
  color: #bbb;
}
複製程式碼

本文旨在個人學習並記錄，如有侵權，請聯絡告知，謝謝！

相關文章