textarea文本框根据输入内容多少自适应高度

最新推荐文章于 2024-05-25 12:09:31 发布
最新推荐文章于 2024-05-25 12:09:31 发布
阅读量8k 收藏 8
点赞数
分类专栏： 简单插件、小功能 文章标签： textarea 文本域 高度自适应

效果图

这里写图片描述
最近刚做了一个电商网站，用到这个功能，从网上搜罗了一个，还蛮好的，是用原生JS写的

<!DOCTYPE html>
<html>
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>文本框根据输入内容自适应高度</title>
    <style type="text/css">
        h2 {
            text-align: center;
            margin: 50px auto;
        }

        #textarea {
            display: block;
            margin: 0 auto;
            overflow: hidden;
            width: 60%;
            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>


</head>

<body>
<h2>文本框根据输入内容多少自适应高度</h2>
<textarea id="textarea" placeholder="回复内容"></textarea>
<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>
<script>
    var text = document.getElementById("textarea");
    autoTextarea(text); // 调用
</script>
<script async src="http://c.cnzz.com/core.php"></script>
</body>

</html>

算是采摘别人的喽

谷小伟
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js判断终端类型、textarea根据内容自适应高度
08-26
里面包含了两个javascript方法，一个是判断终端类型的，根据userAgent判断访问网页的是什么类型的终端 第二个方法，是使textarea根据内容的多少，自动设置相应的高度，使文字不被隐藏
textarea标签自适应宽度和高度
sinat_36978723的博客
12-09 3792
textarea当做输入框可以解析空格和回车，当我们使用textarea展示内容的时候我们希望textarea的宽高可以根据内容自适应而不是定死的像素。 下面是代码： var arr = $(this).scroll().context.value.split("\n"); //获取内容切割回车存到arr中 var l = 0,h = 0; for(var i in arr){
【HarmonyOS NEXT】TextArea组件如何设置最小高度
最新发布
Mayism123的博客
05-25 323
在TextArea中内容没超过最小高度时，按照最小高度显示，超过之后则扩大输入框，请问如何设置最小的高度。通用属性的constraintSize可以设置最小的高度。TextArea / 高度。
textarea高度随内容自动改变
热门推荐
遇见更好的自己
01-06 2万+
需求 textarea默认的高度不是对着内容变化，而是随着内容增多，出现了滚动条。目前的需求是实现一个能够输入的textarea，并且高度跟着内容变化。 发现了一个比较好用的插件flexText，但是这个基于jquery写的，目前的技术栈是react，所以简单看了下，然后用原生的js模拟了一个实现。 原理： html结构： div class="body"> di
如何让textarea随着内容自适应高度
weixin_34005042的博客
08-15 1268
话不多说，直接上干货。 方案一： 用 div 模拟 textarea, 高度自适应，并且有 placeholder 效果 (1)、使用 contenteditable 属性，可让 div 具有编辑输入效果 (2)、模拟 placeholder 的提示效果，此处直接用 CSS 实现 复制代码 (3)、contenteditable 在IOS上有兼容性，虽然能聚焦，但是不能输入内容，此时需要借助属...
定宽的textarea根据内容自动调整高度
hanxin的专栏
06-14 1092
[code="java"] 固定textarea的宽度后，让textarea根据文本的长度自动调整它的高度。 方法一： 方法二： var agt = navigator.userAgent.toLowerCase(); var is_op = (agt.indexOf("opera") != -1); var is_ie = (agt.i...
Vue下textarea文本框根据内容自适应改变高度
10-20
总的来说，创建Vue自定义组件`AutoHeightTextarea`可以方便地实现textarea根据内容自适应高度的效果，同时通过针对性的兼容性处理，可以确保在各种浏览器环境中都有良好的表现。在实际项目中，这样的组件可以大大...
文本框根据输入内容自适应高度的代码
09-05
标题中的“文本框根据输入内容自适应高度的代码”指的是在网页开发中，文本框（textarea）能够自动调整其高度以适应用户输入的内容。这种功能通常用于提高用户体验，避免用户在输入大量文字时需要手动滚动或调整...
Javascript 文本框textarea高度随内容自适应增长收缩
12-04
枫芸志 » 文本框textarea高度自适应增长/伸缩 textarea { height:100px; width: 300px; } 晴枫制作 http://jb51.net [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 方案一在各浏览器中，文本框随内容自适应...
Jquery实现textarea根据文本内容自适应高度
10-24
本文给大家分享的是Jquery实现textarea根据文本内容自适应高度，这些在平时的项目中挺实用的，所以抽空封装了一个文本框根据输入内容自适应高度的插件，这里推荐给小伙伴们。
Vue进阶（幺叁玖）：textarea文本框根据内容自适应改变高度
IT全栈 华强工作室
10-24 4731
项目开发过程中，在展示用户录入意见信息时，使用el-input标签，type=”textarea”属性，在指定:row=”number”后，若输入文本量或显示文本量超过指定行数后，会出现垂直滚动条，但在IE环境下，该滚动条是隐藏的，用户体验性不好，故考虑实现文本框根据文本内容自适应高度的效果。应用代码如下： <template> <div class="my-textarea"> <textarea ref="textarea" :style="{'heig
textarea高度随输入文字变化
学习笔记
01-12 422
1.下载emelentui的计算方法 https://github.com/ElemeFE/element/blob/dev/packages/input/src/calcTextareaHeight.js 2.引入计算方法 import calcTextareaHeight from './calcTextareaHeight' 3.监听输入内容并实时计算高度 watch: { detailAddress(val) { if(val.length > 100){ v
实现textarea标签高度随内容自动变化
筑释科长的博客
06-19 1706
默认情况，textarea标签的高度是不会随文本内容自动撑开的，即其高度固定，高度过多时会使textarea标签出现滚动条；但是有时候会有需求：实现textarea标签高度随内容自动变化，那么可以利用scrollHeight属性实现，如下： // html部分 <textarea id="textarea"></textarea> // js部分 function ...
textarea 动态宽高（根据内容动态撑开宽高）
卡尔特斯
11-11 2815
重点：计算的 span 标签属性需要与 输入框 的字体属性保持一致，这样才能算的精准。 案例代码，标签虽然有默认属性，但是为了能够通过 JS 取到值，所以必须手动写一遍样式属性，html 一样带上 style 即可。 <script> // 文本输入框(必备属性，主要是字体相关属性) // var inputEl = document.createElement('textarea') // inputEl.rows = 1 // inputEl.style.width...
textarea内容自动撑开高度，实现高度自适应
前端队长Daotin
06-29 8916
大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。 以下正文： textarea使我们常用的表单元素。一般用于多行文字的输入。在绝大多数情况下，都可以满足我们的要求。 但是它有一个缺点是，它的高度是固定了，如果文本内容超出了它设定的高度时，就会显示出丑陋的滚动条。 然后有些时候，为了用户体验，我们需要让它的高度随着文本内容的高度而动态变化。 最经...
textarea如何实现根据内容高度自适应和最多显示
weixin_43663349的博客
06-25 1407
最近在写一个课程设计的时候，在实现评论功能的时候我发现我做的用户体验不好，只能显示一行的内容，我去观察了朋友圈的评论功能，点击评论，默认显示一行，当输入的文字超过一行会换行，输入框的高度会随着改变，用户可以看自己评论的所有文字，这个用户体验很好，那怎么实现呢？ 只需要给textarea标签加上auto-height=“true”，注意要给文字设置行高不然会出现叠影， 那如何实现同时实现最多显示3行 如果行高设置line-height: 40rpx; 再设置 max-height: 120rpx.
4种方法实现文本域textarea自适应
郭亮均的博客
04-22 6348
方法一：class复用实现textarea自适应 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"> <html> <head> <title>demo</title> <meta http-equiv="content-type" cont...
textarea文本域宽度和高度（width、height）自己主动适应变化处理
weixin_30328063的博客
09-19 825
文章来源：http://www.cnblogs.com/jice/archive/2011/08/07/2130069.html <HTML> <HEAD> <TITLE>textarea宽度、高度自己主动适应处理方法</TITLE> <!-- 控制宽度的自己主动适应 --> <style type="text...
textarea高度随着内容的多少而变化，高度可以删减
weixin_34174132的博客
09-30 577
问题：可以多行输入，并且输入框的高度随着内容的多少而变化，输入框的高度不能只增不减 由于 input 只能单行输入 textarea可以多行输入，并且高度可以随着内容的增加而增加，但是当内容删减的时候，textarea的高度并不能变低 解决办法：用一个替换标签，这个替代标签所以样式包括字体都和textarea一模一样，内容与textarea内容同步，高度自适应，但是要用一个包裹层，其d...
Textarea-文本框根据输入内容自适应行数
05-24
可以使用以下代码实现： ...<textarea id="myTextarea" oninput="autoResize()"></textarea> ``` ```javascript ...该函数会自动调整文本框的高度，使其能够容纳输入的内容，从而实现自适应行数的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值