vue中textarea標籤自適應高度

2022-08-04 09:51:10 字數 1658 閱讀 8208

textarea.js檔案

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

* @param 輸入框元素

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

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

*/

export default

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();

};

該檔案是操作dom元素,可以使用vue的自定義指令,方便使用

建立directives.js 檔案用來放自定義指令

import vue from 'vue'import autotextarea from './assets/lib/textarea'vue.directive('growheight', 

},inserted:

function

(el)

});

如果dom繫結資料,當第一次改變繫結的資料時,才呼叫autotextarea事件

使用

<

textarea

v-grow-height

="60"

id="textarea"

maxlength

="500"

placeholder

="請輸入作品描述,不超過500字"

v-model

="data"

>

textarea

>

樣式自己修改

#textarea 

textarea

select標籤 textarea標籤

select標籤 下拉列表標籤,常用於單選和多選,是乙個組合標籤,需要和子標籤option一起搭配使用,不會獨佔一行 常用屬性 option標籤 注意 如果使用多選,那麼選擇的時候,需要按下ctrl鍵進行選擇 size屬性我們一般情況下不去設定 selected屬性如果不設定,預設顯示的是列表中的第...

textarea標籤中resize縮放屬性的設定

而textarea標籤中,webkit核心的瀏覽器會預設resize的值為both,即使用者可以調節元素的寬度和高度。如下圖就是在google chrome中我部落格的textarea的預設顯示,textarea右下角有乙個可以控制縮放的按鈕。一般情況下,textarea是被固定寬度和高度的,如果你...

css中解決textarea高度隨內容自適應的問題

目前的輸入框實現有兩種方法 input input輸入框只能實現一行,裡面的內容不能分行顯示 textarea textarea可以實現多行輸入,但是高度卻無法自適應,並且會遇到textarea始終會與下面有一段間距,解決方法 加 vertical align middle 即可 那麼言歸正傳,如何...