vue中textarea標籤自適應高度

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 即可 那麼言歸正傳，如何...