都是提供用戶輸入的標(biāo)簽切诀。區(qū)別如下:
- input 單行文本輸入框 textarea多行文本輸入框
- input textarea都可以通過width height設(shè)置寬高缨睡,textarea還可以通過cols rows來設(shè)置顯示的行數(shù)和列數(shù)
- input textarea都可以通過maxlength來設(shè)置最多輸入的字符數(shù),input的size是最多展示出來的字符數(shù)徘铝,類似于textarea的cols屬性
- input有value屬性耳胎,無法自動(dòng)換行,textarea值是標(biāo)簽對(duì)之間惕它,可以自動(dòng)換行
用一個(gè)div模擬textarea怕午,可以利用塊級(jí)元素的contenteditable屬性,代碼如下:
.textarea {
border: 1px solid #ccc;
padding: 20px;
width: 200px;
min-height: 100px;
/* 可以設(shè)置一個(gè)最大高度淹魄,超出時(shí)滾動(dòng)郁惜,否則,高度會(huì)被撐開 */
/* max-height: 300px; */
overflow: auto;
}
<div class="textarea" contenteditable="true"></div>
這樣子甲锡,就可以模擬textarea了兆蕉,但是這樣設(shè)置,拷貝進(jìn)來的文本支持html缤沦,要想過濾掉html虎韵,只支持純文本,需要設(shè)置contenteditable:plaintext-only或者設(shè)置webkit-user-modify: read-write-plaintext-only; (user-modify只有webkit內(nèi)核支持)