textarea高度自适应
textarea高度自适应，textarea高度自动增高，textarea高度自动撑开，本文通过复制textarea的html给另外一个元素pre,由于设置pre自动展开，所以不会存在有滞留的感觉，交互效果较好。
技术原理
textarea高度自适应是一个比较常用的前端开发效果。在新浪微博的输入框中也有这个效果，不过它那个效果不怎么好看，高度展开有点延迟，可能是通过给高度赋值scrollHeight.而下面这个则是通过复制textarea的html并另外一个元素pre,由于设置pre自动展开，所以不会存在有滞留的感觉，交互效果较好。
兼容情况
在使用之前，推荐两个比较好的事件，分别是oninput和onpropertychange，在textarea发生变化时，可以通过监听这两个事件来触发你需要的功能，看一下兼容情况：
Firefox、Chrome、IE9，IE10均支持oninput事件，此外所有版本的IE均支持onpropertychange事件。oninput事件在用户输入、退格（backspace）、删除（delete）、剪切（ctrl+x）、粘贴（ctrl+v）及鼠标剪切与粘贴时触发（在IE9中只在输入、粘贴、鼠标粘贴时触发）。onpropertychange事件在用户输入、退格（backspace）、删除（delete）、剪切（ctrl+x）、粘贴（ctrl+v）及鼠标剪切与粘贴时触发（在IE9中只在输入、粘贴、鼠标粘贴时触发）（仅IE支持）。backspace、delete两个按键的keyCode分别为8、46。oncut事件在粘贴（ctrl+v）、鼠标粘贴时触发。
演示代码
HTML代码：
<div class="expandingArea " id="textarea"><pre><span></span><br></pre><textarea></textarea></div>
JS：（更新于2016.10.13）
function makeExpandingArea(container) {var area = container.getElementsByTagName('textarea')[0] ;var span = container.getElementsByTagName('span')[0] ;if (area.addEventListener) {
area.addEventListener('input', function() {
span.textContent = area.value;
}, false);
span.textContent = area.value;
} else if (area.attachEvent) {
area.attachEvent('onpropertychange', function() {var html = area.value.replace(/n/g,'<br/>');
span.innerText = html;
});var html = area.value.replace(/n/g,'<br/>');
span.innerText = html;
}if(window.VBArray && window.addEventListener) { //IE9area.attachEvent("onkeydown", function() {var key = window.event.keyCode;if(key == 8 || key == 46) span.textContent = area.value;
});
area.attachEvent("oncut", function(){
span.textContent = area.value;
});//处理粘贴}
container.className += "active";
}var areas = document.getElementById('textarea') ;
makeExpandingArea(areas);
演示地址
参考链接1、链接2、监听文本框输入
当然如果你不追求用户体验的话，QQ拍卖地图则可以只使用textarea，并加入一个简单的代码就能够搞定。可以使用上面同样的两个事件来监听其触发textarea的动作，并赋予textarea的高度为它的scrollHeight。
使用scrollHeight方法
只需要一个textarea：（20170107补充）
HTML代码：
<textarea id="textarea"></textarea>
JavaScript代码：(2019.3.30更新：修复ie8 bug)
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) { //IE9el.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);
更多相关文章
- 【前端 · 面试 】JavaScript 之你不一定会的基础题（一）
- 浅析 MVC
- 给大家分享一个一键采集哔哩哔哩短视频素材的软件
- Mac上复制和粘贴的一些小技巧
- linux vim 复制粘贴代码
- Take Command 事件监视命令（触发器）
- 【Vue框架学习】Vue常用指令、事件修饰符、按键修饰符、计算属性
- Zabbix
- __call__