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) { //IE9
area.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。
只需要一个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) { //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);
textarea默认的高度不是对着内容变化,而是随着内容增多,出现了滚动条。目前的需求是实现一个能够输入的textarea,并且高度跟着内容变化。以及小程序的textarea高度随内容自动改变的实现
textarea代表HTML表单多行输入域,textarea标签是成对出现的,以<textarea>开始,以</textarea>结束。cols -- 多行输入域的列数,rows -- 多行输入域的行数
起初会想到使用keyup、keydown、keypress或者是onchange事件,onchange需要失去焦点才触发, 其它三个有些对按住键盘某个键不放不生效,有些对使用中文输入法正在输入时统计不正确。
这个功能还比较常见,用来获取文本的长宽(避免了计算不准的问题),主要用于实现 textarea 自动变长。可以看到在我们使用 textarea 的时候,有时候需要感知内容的高度,然后动态撑开
想法是使 <textarea> 更像 <div>,因此它的高度可以扩展以包含当前值。这几乎是奇怪的,没有一个简单的原生解决方案,不是吗?现在我得到了一个非常好的原生解决方案。
大家做前端的时候,相信都遇到过,利用多行文本控件 textarea 录入数据,多段落回车换行,但是在页面展示时,换行就不出效果了,有什么办法可以解决呢,下面给大家介绍两种个人觉得最简单的方法。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!