textarea 動態填充內容 文本框高度自適應

需求是導入文件內容,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)
            }
        });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章