textarea.js檔案
/*** 文字框根據輸入內容自適應高度
* @param 輸入框元素
* @param 設定游標與輸入框保持的距離(預設0)
* @param 設定最大高度(可選)
*/
export defaultfunction
(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
>
樣式自己修改
#textareatextarea
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 即可 那麼言歸正傳,如何...