需求是導入文件內容,textarea文本框自動增加高度
/**
elem:傳入對象($('#div'))
scroll:是否顯示滾動(true/false)
*/
var autoTextareaHeight = (elem, scroll) => {
if (elem instanceof jQuery) {
elem.css('overflow-y', scroll ? 'scroll' : 'hidden').css('height', elem[0].scrollHeight)
} else {
elem.style.height = elem.scrollHeight;
elem.style.overflowY = scroll ? 'scroll' : 'hidden';
}
}
autoTextareaHeight($('#liveRoomURL'), true) //jquery調用,顯示滾動條
//js調用,不顯示滾動條
let textarea = document.getElementById(‘liveRoomURL’);
autoTextareaHeight(textarea,false)
如果要使用監聽最好使用oninput而不是onchange:
onkeyup
使用複製粘貼時,高度不能自動改變
onchange
事件:在內容改變(兩次內容有可能相等)且失去焦點時觸發,不能實時同步
oninput
事件:HTML5 的標準事件,可以用來檢測元素通過用戶界面發生的內容變化,在內容修改後立即被觸發
我這邊是監聽回車鍵,每次回車則重新設置高度
$("#liveRoomURL").keydown(function(e) {
if (e.keyCode == 13) {
autoTextareaHeight($('#liveRoomURL'), true)
}
});