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