在使用textarea的时候想要字体高度自适应

遇到这样一个需求,当定义好textarea的宽度后想要当插入内容后它的高度是自适应的,同时编辑的时候也要自适应高度。只需要加上以下代码就好

$('textarea').each(function () {
this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});

2.。。在使用textarea的时候,通常也会遇到样式的问题,若要去掉它的边框的时候,它右下角的三角形的标记是没法去掉的,只需要加上一行代码,resize :none就好了。

3.。。当textarea获得焦点的时候,它的边框会出现蓝色或其他色的高亮,有些人会觉得这样才有编辑的感觉,有些人会觉得丑陋不堪想要去掉。想去掉的同志,只需要加上一行代码outline:none;完美解决。

4.。同理。若不想要button、input、select的边框,同理做到,,

posted @ 2017-04-20 11:26  单于521  阅读(317)  评论(0编辑  收藏  举报