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:
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);
当然如果你不追求用户体验的话,则可以只使用textarea,并加入一个简单的代码就能够搞定。可以使用上面同样的两个事件来监听其触发textarea的动作,并赋予textarea的高度为它的scrollHeight。
使用scrollHeight方法
只需要一个textarea:
HTML代码:
<textarea id="textarea"></textarea>
JavaScript代码:
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);