国瑞个人博客
首页 > 前端 > Html+Css > textarea根据后台返回的字符自适应

textarea根据后台返回的字符自适应

textarea根据后台返回的字符自适应

 2019年01月17日 作者: 国瑞个人博客 455次浏览

通常情况下,高度由前端固定好,但是固定好了超出了怎么办呢,这个时候我们就要使用到代码来进行自适应了,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本框根据输入内容自适应高度</title>
<style type="text/css">
h2{
        text-align: center;
        margin:50px auto;
    }
#textarea {
    display: block;
    margin:0 auto;
    overflow: hidden;
    width: 550px;
    font-size: 14px;
    height: 18px;
    line-height: 24px;
    padding:2px;
}
textarea {
    outline: 0 none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>
<script>
/**
 * 文本框根据输入内容自适应高度
 * @param                {HTMLElement}        输入框元素
 * @param                {Number}                设置光标与输入框保持的距离(默认0)
 * @param                {Number}                设置最大高度(可选)
 */

var autoTextarea = function (elem, extra, maxHeight) {
        extra = extra || 0;
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
        isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
                addEvent = function (type, callback) {
                        elem.addEventListener ?
                                elem.addEventListener(type, callback, false) :
                                elem.attachEvent('on' + type, callback);
                },
                getStyle = elem.currentStyle ? function (name) {
                        var val = elem.currentStyle[name];
                       
                        if (name === 'height' && val.search(/px/i) !== 1) {
                                var rect = elem.getBoundingClientRect();
                                return rect.bottom - rect.top -
                                        parseFloat(getStyle('paddingTop')) -
                                        parseFloat(getStyle('paddingBottom')) + 'px';        
                        };
                       
                        return val;
                } : function (name) {
                                return getComputedStyle(elem, null)[name];
                },
                minHeight = parseFloat(getStyle('height'));
       
       
        elem.style.resize = 'none';
       
        var change = function () {
                var scrollTop, height,
                        padding = 0,
                        style = elem.style;
               
                if (elem._length === elem.value.length) return;
                elem._length = elem.value.length;
               
                if (!isFirefox && !isOpera) {
                        padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
                };
                scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
               
                elem.style.height = minHeight + 'px';
                if (elem.scrollHeight > minHeight) {
                        if (maxHeight && elem.scrollHeight > maxHeight) {
                                height = maxHeight - padding;
                                style.overflowY = 'auto';
                        } else {
                                height = elem.scrollHeight - padding;
                                style.overflowY = 'hidden';
                        };
                        style.height = height + extra + 'px';
                        scrollTop += parseInt(style.height) - elem.currHeight;
                        document.body.scrollTop = scrollTop;
                        document.documentElement.scrollTop = scrollTop;
                        elem.currHeight = parseInt(style.height);
                };
        };
       
        addEvent('propertychange', change);
        addEvent('input', change);
        addEvent('focus', change);
        change();
};
</script>
</head>
<body>
    <h2>文本框根据输入内容自适应高度</h2>
    <textarea id="textarea" placeholder="回复内容"></textarea>
    <script>
        var text = document.getElementById("textarea");
        autoTextarea(text);// 调用
    </script>
</body>
</html>

通过上面我们发现代码还是比较多的,还有没有办法少一些代码呢,那么我们现在就可以直接通过jquer进行判断:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function(){
        $.fn.autoHeight = function(){    
        function autoHeight(elem){
            elem.style.height = 'auto';
            elem.scrollTop = 0; //防抖动
            elem.style.height = elem.scrollHeight + 'px';
        }
        this.each(function(){
            autoHeight(this);
            $(this).on('keyup', function(){
                autoHeight(this);
            });
        });    
    }                
    $('textarea[autoHeight]').autoHeight();    
})

//页面中的textarea直接加属性就行
<textarea  autoHeight="true" readonly="readonly" > </textarea>

readonly属性规定输入字段为只读。
只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。

百度已收录

点击快速分享:

以上就是国瑞前端个人博客带来的是《textarea根据后台返回的字符自适应》,感谢您的观看!

如果没有特殊的说明,本文即为国瑞前端博客原创(www.huanggr.cn),欢迎读者转载并保留本站版权!https://www.huanggr.cn/1190.html

「专业前端博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 26 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
26

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

相关文章:

共有 0 条评论

博客简介

国瑞个人博客: https://www.huanggr.cn/,我们关注Web前端开发技术,web前端开发,移动前端开发,前端资讯,同时分享前端资源和工具等,期待你的参与,了解更多..

博主独立研发主题:

本站唯一QQ群

加入国瑞个人博客QQ群

本群为学习探讨群,主要和前端相关,欢迎广大前端(抱有学习目的均可)爱好者加入!广告请勿添加!

升级版本

web前端开发博客,基于vue脚手架制作的前端博客正在制作中,尽情期待,目前示例的代码位于此处

最新版本(尽请期待)-web前端开发博客

精彩评论

本站主要提供服务

二年web前端开发博客,本站专注提供web资源下载,技术问题解答,经验分享,也提供新手的web技术指导,二年前端个人博客,期待你的加入!

站点统计

  • 文章总数: 269 篇
  • 草稿数目: 50 篇
  • 分类数目: 26 个
  • 页面总数: 16 个
  • 评论总数: 216 条
  • 链接总数: 10 个
  • 标签总数: 104 个
  • 建站时间: 803 天
  • 注册用户: 659 人
  • 访问总量: 8780711 次
  • 最近更新: 2019年7月15日
-->