原文:實現一個高度自適應的輸入框

需求背景 實現一個輸入框,高度可以隨着輸入文字的增加而自動增高,類似於微信輸入 有placeholder,輸入為空時,顯示placeholder 可設置maxlength 設想 :使用textarea實現 將textarea的高度設置成auto,overflow設置成visible。代碼如下: 但是經過測試,textarea實際上有默認的高度,隨着輸入的增多會出現滾動條,並沒有達到我們想要的效果 ...

2017-05-24 09:37 0 3998 推薦指數:

查看詳情

高度自適應輸入框

有時候我們需要一個高度能隨內容自動增加的輸入框,input 顯然不行,因為 input 里的文字是不換行的。文本域 textarea 里的文字倒是換行的,可一旦文字內容超過其高度,textarea 就會增加一個煩人的滾動條,這是很影響視覺的,就如同下面:   那么有沒有辦法制作一個高度 ...

Fri Dec 13 23:27:00 CST 2019 0 481
自適應高度輸入框(contenteditable/textarea)

1.坑1(IOS端無法輸入) 在取消全局默認樣式的時候,由於代碼加了-webkit-user-select: none(設置或檢索是否允許用戶選中文本),只要在當前div上設置-webkit-user-select: text就可以輸入了。 2.坑2(IOS端無法獲取焦點 ...

Mon Jan 07 19:44:00 CST 2019 0 1129
CSS實現輸入框寬度隨內容自適應效果

  有時候我們會遇到如下需求:輸入框的寬度隨內容長度自適應,當輸入框寬度增大到一定值時,里邊的內容自動隱藏。   面對這種需求,我們首先想到的是使用input元素標簽,但是發現input標簽的寬度默認設定的是固定的,不支持min-width和max-width樣式,所以如果想實現寬度隨內容自適應 ...

Wed Oct 17 18:30:00 CST 2018 0 5576
輸入框文本大小自適應效果

簡介 常常有產品提起這種效果 html 寫上一個input元素 css 重點在於transition動畫,讓字體大小切換的時候顯得平滑 js 監聽input輸入框輸入,計算輸入框內容的長度(一個中文當作兩個字符長度),程序中寫死計算規則。 ...

Sun Mar 15 01:48:00 CST 2020 0 847
CSS 自適應內容寬度的輸入框

目前我所知道的有兩種方式,相信不難找到 1、給普通 div 標簽設置 contenteditable="true",設置 inline-block 以后,就可以自適應內容寬度了 2、將 input 的輸入內容同步到一個透明的 div ,父級寬度跟隨 div 的寬度,然后設置 input ...

Tue Jan 18 19:01:00 CST 2022 0 957
簡單實現一個textarea自適應高度

textarea自適應實現方法很多,原理其實比較簡單:監聽textarea的input或者鍵盤事件,獲取元素的scrollHeight,重置textarea元素的高度。 預覽地址:textarea 我們知道textarea有個rows的屬性,改變rows的值可以改變textarea的高度 ...

Thu Dec 20 01:34:00 CST 2018 0 627
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM