textarea 动态填充内容 文本框高度自适应

需求是导入文件内容，textarea文本框自动增加高度

如果要使用监听最好使用oninput而不是onchange：

onkeyup 使用复制粘贴时，高度不能自动改变

onchange 事件：在内容改变（两次内容有可能相等）且失去焦点时触发，不能实时同步

oninput 事件：HTML5 的标准事件，可以用来检测元素通过用户界面发生的内容变化，在内容修改后立即被触发

我这边是监听回车键，每次回车则重新设置高度

html：

<section class="upload-section">

  <article class="upload-piclist">

    <div class="upload-file">

        <input type="file" id="file" accept="image/" multiple onchange="imgChange()"/>

    </div>

  </article>

</section>

css:

/ body {

  margin: 0;

  padding: 0;

  max-width: 414px;

  margin: 0 auto;

  } /

  upload-fh {

  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAD1klEQVRoQ+XbTYhWVRgH8P8fwZUguFKi2pShbvqg2lhhG0PJlc40zQg62WhDg+jklIo1wViUNgwVTGSWWMngyvCjVdLHLrHaJaOBIIK2DHL7lweegcvL48D7vveee7xztu+d972/Ofec8zznPJe4T5qkRQC2AVgP4A8AMySvt3v7bPcP6rhe0lIAJwFsKvz+CZLb272f7MGSHnDsiy24WZKPNQosyUDWs88EsEGS3zQGLOkpx64OUG+T/LhdrF2f5SMt6QXHPhSghklOd4LNEixpo2OXBaitJL/rFJsdWFKvYxe3oO4A6Cd5phtsVmBJrwH4KgD9C+BVkj91i80GLGk3gKkA9I9jfy8DmwVY0kEAEwHoL8f+XRa2drCkDwG8E4B+A9BH8maZ2FrBkj4D8GYA+hHAKyT/KxtbG1iSRUiWCLS2045VFdjkYEm23HwPYHMAOk5yR1XQue9NFmlJskDCsC8FqCmSe6rGJuthSRYiGnZtgJogeSgFNglYkgX/hn08QI2RPJIKWzlYkqV1hn0kQL1B8ouU2ErBkixhN+zyADVA0j5L3iqZtCTZVoyBlrSILAmwNfZscqn/YOlgSf0AohTOkoBekj/XhS39kZa0E0A0Li0JMOzlOrGlgiWNAjgagCwJ6CF5tW5saWBJ7wEYD0CWBBj2Vg7YUsCSbB19KwBdcOz/uWC7BkuyzbRdAchOBfpygs7dS8eztKRvAQwEqGMkh3LEdtzDkj4CMBagJkna5JVt66iHJUX56jjJ97OVdhN4SLJtGdueaW3N7GFTLqgxPNetC2qWLqDtUGtf8Hif93CyOetwAf0ugGjC+tXRzYm0Cui9AD4JevpPRzcnli6gXwfwZYC+5mGm4WttHa3D892xJAspTwXX3Pae/qVOcelgX7JednS042F58bm60JWAHb3Ot3lWBDg7N5qpA10Z2NFPO/rRADdE8lhqdKVgR69y9BMBbpTkZEp05WBHP+jo5wJc0qQjCdjRdrZkOfSGAJ0s6UgGdrSdHhq6J0An2ThICi4EKMcBDAZom7mtgKUZ58NFoCQrYrFiltZmSYehm1MBUOjpwwAOBGhLOgzdnBqPAno/gA8CtMXdhr5S5rJVyxhuBUgaAfBpALOkw9CXykJnAfYZ3Iq9vw5glnQY+mIZ6GzAjt7iJ49RraWhf+gWnRXY0RaY2Frd/GrawkT2vFfVPhz0aLPqpQvoJx29JkA3qyK+gF7p6GcD9AjJz9sd09mN4WDJutdbLTdIRq8IzPs/yB7sE9nCeW+p8Hjbm2nDAKwcahbAdGPfTGt3nM53/V00ckNMKWY8LAAAAABJRU5ErkJggg==');

  background-repeat: no-repeat;

  background-size: 100% 100%;

  height: 30px;

  width: 30px;

  }

  upload-hedaer {

  height: 55px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  padding: 0 10px;

  box-sizing: border-box;

  align-items: center;

  text-align: center;

  background: #287cff;

  color: #fff;

  border-bottom: 1px solid #efefef;

  font-size: 19px;

  }

  upload-hedaer div:last-child {

  text-align: right;

  }

  upload-textarea {

  width: 100%;

  height: 60px;

  font-size: 28px;

  border: 1px solid #efefee;

  max-height: 300px;

  }

  upload-article-text {

  width: 100%;

  padding: 10px;

  box-sizing: border-box;

  }

  upload-file {

  position: relative;

  background: url('/images/z_addpng') no-repeat 50%/100% 100%;

  / width: 100px; /

  height: 120px;

  order: 9;

  }

  upload-piclist {

  padding: 0 10px;

  box-sizing: border-box;

  display: grid;

  grid-template-columns: repeat(3, 120px);

  justify-content: space-between;

  grid-gap: 14px;

  }

  #file {

  width: 100%;

  height: 100%;

  opacity: 0;

  }

  upload-Picitem {

  width: 100%;

  height: 120px;

  }

  upload-Picitem>img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  }

  submit {

  padding: 15px 0;

  background-color: #287cff;

  color: #fff;

  text-align: center;

  margin: 10px;

  font-size: 20px;

  border-radius: 10px;

  }

  upload-sm {

  padding: 10px;

  box-sizing: border-box;

  color: gray;

  }

  upload-sm ol>li {

  margin-bottom: 10px;

  }

js:let picmax = 9; //限制上传数量

function imgChange() {

let file = documentgetElementById('file')files;

let imglist = documentquerySelectorAll('upload-Picitem');

let piclist = documentgetElementsByClassName('upload-piclist')[0];

let filelist = filelength + imglistlength > picmax 9 - imglistlength : filelength + imglistlength;

if (filelength + imglistlength >= 9) {

let uploadfile = documentgetElementsByClassName('upload-file')[0]

uploadfilestyledisplay = "none"

}

for (let i = 0; i < filelist; i++) {

readerfile(file[i])then(e => {

let html = documentcreateElement('div');

htmlclassName = 'upload-Picitem'

htmlinnerHTML = '<img src=' + e + ' alt="pic">'

piclistappendChild(html);

})

}

}

function readerfile(file) {

return new Promise((resolve, reject) => {

let reader = new FileReader();

readeraddEventListener("load", function() {

resolve(readerresult);

}, false)

if (file) {

readerreadAsDataURL(file)

}

})

}

//提交

function submit() {

let imglist = []

let text = documentgetElementsByClassName('upload-textarea')[0]value

let piclist = documentquerySelectorAll('upload-Picitem');

for (let i = 0; i < piclistlength; i++) {

imglistpush(piclist[i]lastChildsrc)

}

consolelog("发布内容：", text)

consolelog("列表：", imglist)

}

//textarea高度自适应

var autoTextarea = function(elem, extra, maxHeight) {

extra = extra || 0;

var isFirefox = !!documentgetBoxObjectFor || 'mozInnerScreenX' in window,

isOpera = !!windowopera && !!windowoperatoString()indexOf('Opera'),

addEvent = function(type, callback) {

elemaddEventListener

elemaddEventListener(type, callback, false) :

elemattachEvent('on' + type, callback);

},

getStyle = elemcurrentStyle function(name) {

var val = elemcurrentStyle[name];

if (name === 'height' && valsearch(/px/i) !== 1) {

var rect = elemgetBoundingClientRect();

return rectbottom - recttop -

parseFloat(getStyle('paddingTop')) -

parseFloat(getStyle('paddingBottom')) + 'px';

};

return val;

} : function(name) {

return getComputedStyle(elem, null)[name];

},

minHeight = parseFloat(getStyle('height'));

elemstyleresize = 'none';

var change = function() {

var scrollTop, height,

padding = 0,

style = elemstyle;

if (elem_length === elemvaluelength) return;

elem_length = elemvaluelength;

if (!isFirefox && !isOpera) {

padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));

};

scrollTop = documentbodyscrollTop || documentdocumentElementscrollTop;

elemstyleheight = minHeight + 'px';

if (elemscrollHeight > minHeight) {

if (maxHeight && elemscrollHeight > maxHeight) {

height = maxHeight - padding;

styleoverflowY = 'auto';

} else {

height = elemscrollHeight - padding;

styleoverflowY = 'hidden';

};

styleheight = height + extra + 'px';

scrollTop += parseInt(styleheight) - elemcurrHeight;

documentbodyscrollTop = scrollTop;

documentdocumentElementscrollTop = scrollTop;

elemcurrHeight = parseInt(styleheight);

};

};

// addEvent('propertychange', change);

// addEvent('input', change);

// addEvent('focus', change);

change();

};

pic:z_addpng

(1)、使用 contenteditable 属性，可让 div 具有编辑输入效果

(2)、模拟 placeholder 的提示效果，此处直接用 CSS 实现

(3)、contenteditable 在IOS上有兼容性，虽然能聚焦，但是不能输入内容，此时需要借助属性 -webkit-user-select: text , 来解决这个兼容性

(4)、缺点：获取 div 文本的时候，内部会包含一些HTML标签，所以需要单独处理转译的数据，才能正常使用数据

（1）、设置一个 div 与 textarea 同层级，外层包裹一个 div ,定位为 relative

（2）、textarea 绝对定位，宽度高度均为 100%，相对于父层 div 来说

（3）、内部 div，设置为 relative， 在检测 textarea 的 onchange 事件的时候，把文本填充到内部 div 里面，以此来撑开父层 div 的高度和宽度

（4）、给内部 div 设置 不可见属性，visibility：hidden，这样 div 是看不见的，但是它的物理位置是存在的，所以能够撑开父层 div

（5）、该方案相对于方案一来说，更简便和完美，尤其是需要获取输入内容的时候

以上就是关于textarea 动态填充内容 文本框高度自适应全部的内容，包括:textarea 动态填充内容 文本框高度自适应、html实现图片上传、如何让textarea随着内容自适应高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！