input和textarea的區(qū)別

都是提供用戶(hù)輸入的標(biāo)簽。區(qū)別如下:

  • input 單行文本輸入框 textarea多行文本輸入框
  • input textarea都可以通過(guò)width height設(shè)置寬高,textarea還可以通過(guò)cols rows來(lái)設(shè)置顯示的行數(shù)和列數(shù)
  • input textarea都可以通過(guò)maxlength來(lái)設(shè)置最多輸入的字符數(shù),input的size是最多展示出來(lái)的字符數(shù),類(lèi)似于textarea的cols屬性
  • input有value屬性,無(wú)法自動(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ì)被撐開(kāi) */
    /* max-height: 300px; */
    overflow: auto;
}
    
<div class="textarea" contenteditable="true"></div>

這樣子,就可以模擬textarea了,但是這樣設(shè)置,拷貝進(jìn)來(lái)的文本支持html,要想過(guò)濾掉html,只支持純文本,需要設(shè)置contenteditable:plaintext-only或者設(shè)置webkit-user-modify: read-write-plaintext-only; (user-modify只有webkit內(nèi)核支持)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容