textarea高度自適應

2022-03-10 10:33:18 字數 919 閱讀 4981

textarea高度自適應

有時候寫表單的時候,會有乙個 備註框textarea。

因為textarea不支援自適應高度,就是定好高度或者是行數之後,超出部分就會顯示滾動條,看起來不美觀。

我們需要美觀實現的效果:預設顯示一行。當輸入的文字超過一行或者輸入enter時,

輸入框的高度會隨著改變,直到輸入完畢。也就是要實現textarea的高度自適應

方案a:用div來模擬textarea實現的,用css控制樣式,不用js。

而用div來模擬時,首先遇到的問題是:div怎麼實現輸入功能?

乙個普通的block元素上加個contenteditable="true"就實現編輯,出現游標了。

如.test-textarea

方案b:js實現textarea自適應

由於第一種方法,改變了原有專案裡面的結構標籤

textarea需要改變為div

則,在原有基礎上進行js修改來達到輸入框自適應

******************************==

方案c:jq實現textarea自適應(id實現)

.text-adaption

方案d:jq實現textarea自適應(class復用實現)

.text-adaption

$(function()

var obj=getclass("text-adaption");

var len=obj.length;

for(var i=0;i

textarea實現高度自適應

css部分 textarea textarea js 文字框根據輸入內容自適應高度 param 輸入框元素 param 設定游標與輸入框保持的距離 預設0 param 設定最大高度 可選 var autotextarea function elem,extra,maxheight getstyle ...

編寫自適應高度的 textarea

文字框是很常見的輸入控制項,我相信只要寫過表單的肯定接觸過 textarea 這個元素。ok。但是現在產品經理說了 需要這個文字框可以根據使用者輸入內容自適應其高度。有些初學者可能會想 自適應高度不就是height auto麼?可是你想一下,乙個textarea沒有手工給它指定過樣式,不應該就預設是...

編寫自適應高度的 textarea

文字框是很常見的輸入控制項,我相信只要寫過表單的肯定接觸過 textarea 這個元素。ok。但是現在產品經理說了 需要這個文字框可以根據使用者輸入內容自適應其高度。有些初學者可能會想 自適應高度不就是height auto麼?可是你想一下,乙個textarea沒有手工給它指定過樣式,不應該就預設是...