html textarea 缩放,textarea自动撑开缩放

思路一

使用一个pre元素，将textarea的内容复制到pre的子元素span中，利用元素换行自动撑开包裹元素.wrap的高度。

监听事件

Firefox、Chrome、IE9，IE10 均支持 oninput 事件，此外所有版本的 IE 均支持 onpropertychange 事件。

1.oninput

oninput 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、鼠标粘贴时触发)。

2.onpropertychange

onpropertychange 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、鼠标粘贴时触发)(仅 IE 支持)

实现

div, pre, span, textarea {

padding: 0;

margin: 0;

}

.wrap{

position: relative;

border: 1px solid black;

overflow: hidden;

}

.wrap > pre{

padding: 8px 12px;

}

#expand-area{

white-space: pre-wrap; /* 段落中的文本换行 */

word-wrap: break-word; /* 长单词换行 */

}

.wrap textarea{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%; /* textarea 热区充满整个区域*/

padding: 8px 12px;

outline: 0;

resize: none;

border: none;

overflow: hidden;

box-sizing: border-box;

}

function autoExpand (wrap) {

let expandDom = wrap.querySelector('#expand-area')

let textarea = wrap.querySelector('#txt')

// Firefox、Chrome、IE9，IE10支持oninput，所有版本的 IE 支持onpropertychange

if (textarea.addEventListener) {

textarea.addEventListener('input', function() {

expandDom.textContent = textarea.value;

}, false);

expandDom.textContent = textarea.value;

} else if (textarea.attachEvent) {

textarea.attachEvent('onpropertychange', function() {

var html = textarea.value.replace(/\n/g,'
');

expandDom.innerText = html;

});

var html = textarea.value.replace(/\n/g,'
');

expandDom.innerText = html;

}

if(window.VBArray && window.addEventListener) { //IE9

textarea.attachEvent("onkeydown", function() {

var key = window.event.keyCode;

if(key == 8 || key == 46) expandDom.textContent = textarea.value; // backspace、delete 两个按键的 keyCode 分别为 8、46

});

textarea.attachEvent("oncut", function(){

expandDom.textContent = textarea.value;

});//处理粘贴

}

}

autoExpand(document.querySelector('.wrap'))

思路二

只使用textarea并赋予textarea的高度为它的scrollHeight，但是交互不友好，有明显的的抖动。

function makeExpandingArea(el) {

var timer = null;

//解决ie8有溢出堆栈问题

var setStyle = function(el, auto) {

if (auto) el.style.height = 'auto';

el.style.height = el.scrollHeight + 'px';

}

var delayedResize = function(el) {

if (timer) {

clearTimeout(timer);

timer = null;

}

timer = setTimeout(function() {

setStyle(el)

}, 200);

}

if (el.addEventListener) {

el.addEventListener('input', function() {

setStyle(el, 1);

}, false);

setStyle(el)

} else if (el.attachEvent) {

el.attachEvent('onpropertychange', function() {

setStyle(el)

})

setStyle(el)

}

if (window.VBArray && window.addEventListener) { //IE9

el.attachEvent("onkeydown", function() {

var key = window.event.keyCode;

if (key == 8 || key == 46) delayedResize(el);

});

el.attachEvent("oncut", function() {

delayedResize(el);

}); //处理粘贴

}

}

var textarea = document.getElementById('textarea');

makeExpandingArea(textarea);