textarea實現高度自適應

2022-06-30 19:12:09 字數 1193 閱讀 7158

css部分

#textarea 

textarea

js**

/**

* 文字框根據輸入內容自適應高度

* @param 輸入框元素

* @param 設定游標與輸入框保持的距離(預設0)

* @param 設定最大高度(可選)

*/var autotextarea = function (elem, extra, maxheight) ,

getstyle = elem.currentstyle ? function (name) ;

return val;

} : function (name) ,

minheight = parsefloat(getstyle('height'));

elem.style.resize = 'none';

var change = function () ;

scrolltop = document.body.scrolltop || document.documentelement.scrolltop;

elem.style.height = minheight + 'px';

if (elem.scrollheight > minheight) else ;

style.height = height + extra + 'px';

scrolltop += parseint(style.height) - elem.currheight;

document.body.scrolltop = scrolltop;

document.documentelement.scrolltop = scrolltop;

elem.currheight = parseint(style.height);

};};

addevent('propertychange', change);

addevent('input', change);

addevent('focus', change);

change();

};

html部分  包含呼叫

textarea高度自適應

textarea高度自適應 有時候寫表單的時候,會有乙個 備註框textarea。因為textarea不支援自適應高度,就是定好高度或者是行數之後,超出部分就會顯示滾動條,看起來不美觀。我們需要美觀實現的效果 預設顯示一行。當輸入的文字超過一行或者輸入enter時,輸入框的高度會隨著改變,直到輸入完...

div實現高度自適應的textarea

textarea使我們常常使用的一種表單形式,多用於大段文字的輸入,大多數情況下,textarea都是可以滿足需求的,但是當我們希望這個輸入框高度自適應的時候,textarea就很難做到了。ok,主角登場,html5中的 contenteditable 可以做到。文件 即這個屬性是直接新增在標籤中的...

編寫自適應高度的 textarea

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