js控制textarea文本域自适应高度

最新推荐文章于 2025-06-30 10:12:51 发布
原创 最新推荐文章于 2025-06-30 10:12:51 发布 · 5.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #web

本文介绍了一个自适应文本区域的实现方案，通过JavaScript监听文本框的各种事件，并调整其高度以适应内容的变化，确保输入内容完全可见。
<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
width:360px;
border: 0 none white;
overflow: hidden;
padding: 0;
outline: none;
background-color: #D0D0D0;
resize: none;
margin-top:30px;
margin-left:400px;
border-radius:5px;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init () {
    var text = document.getElementById('text');
    function resize () {


var he = text.style.height;
//获取文本框本本身高度
var h = he.substring(0,he.indexOf('p'));


if(text.scrollHeight > h){
text.style.height = text.scrollHeight+'px';
}else{
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
}
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);


    text.focus();
    text.select();
    resize();
}
</script>
</head>
<body onload="init();">
<textarea  id="text" rows="5"></textarea>
</body>
</html>
React 实现 textarea 文本域自适应高度(autoSize)
天问博客-专注于大前端技术
01-19 1774
在 React 应用中，有时需要一个文本域（textarea）能够根据输入的内容自动调整其高度。这在创建具有良好用户体验的表单和界面时非常有用。本文将介绍如何使用 React 来实现这一功能。
JS - 控制 textarea 根据内容自适应高度
Chon.Wang
04-29 515
简单粗暴 本文来自同事代码，以此记录，如有相同，请收下在下的膝盖。 <script> // 页面加载调用 ableMutibleTextArea(); function ableMutibleTextArea(){ $('textarea').each(function(value,ele) { autoTextarea(ele); }); } /** * 文本框根据输入内容自适应高度 * @param {HTMLE.
js实现textarea自适应高度
MorningDuGe
07-31 1541
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #t{ outline:none; border:thin solid rgba(82, 168,
Element-ui 之 Textarea 自适应文本高度功能的源码分析
rongrongVivian的博客
06-30 1546
本文将深入分析 Element UI 中 Textarea 自适应文本高度功能的实现原理。
实现js 动态加载textarea内容的高度
忧郁深蓝
06-17 1141
在很多时候，我们需要用textarea来显示内容，因为这样可以不必去处理textarea填写的数据，显示的时候不用在转换，但是高度是一个问题。昨天碰上了就研究了一下，发现不是很难，直接上代码了。 //定义css，无边框，不可修改，选中的时候取消边线.自动滚动条，不可改变大小 .text_readonly{zoom:1;outline:0;line-height:20px; backgroun...
[JS]Textarea 自动调整高度 (适用于各浏览器)
weixin_30413739的博客
07-16 231
<textarea onpropertychange="setHeight(this);" onmouseover="setHeight(this);" onpaste="setHeight(this);" oninput="setHeight(this);"></textarea> 1 function setHeight(obj) 2 { 3 ...
js实现textarea高度根据内容自适应
肃之峰
07-27 384
.input_textarea为textarea的class名。 $(".input_textarea").each(function(){         this.style.height=this.scrollHeight+'px';     });     $(".input_textarea").bind({         input:function(){    
div模拟textarea文本域实现高度自适应效果代码
09-25
当我们决定使用div来模拟具有高度自适应效果的textarea文本域时，可以借助CSS中的min-height和max-height属性来实现。min-height属性定义了元素的最小高度，而max-height属性则定义了元素的最大高度。如果内容不足以...
Textarea根据内容自适应高度
09-04
总结一下，实现`Textarea`根据内容自适应高度的关键在于使用JavaScript监听文本域的相关事件，并在事件发生后及时更新文本域的高度。这个过程通过`observe`函数进行跨浏览器的事件绑定，通过`resize`函数计算并设置...
textarea文本域宽度和高度width及height自动适应实现代码
09-28
本文将详细介绍如何通过JavaScript和CSS来实现`textarea`文本域的宽度和高度自适应。 首先，对于宽度的自动适应，通常我们希望`textarea`能填满其父容器的宽度。在HTML中，我们可以给`textarea`添加一个CSS类，如`...
js实现textarea根据内容大小自适应高度
sinolzeng的专栏
12-26 5108
首先，我们来看看源代码： /** * 文本框根据输入内容自适应高度 * @param {HTMLElement} 输入框元素 * @param {Number} 设置光标与输入框保持的距离(默认0) * @param {Number}
js实现文本框宽度自适应文本宽度的方法
10-23
主要介绍了js实现文本框宽度自适应文本宽度的方法,可实现根据文本框内容动态改变宽度的功能,涉及javascript动态操作页面元素属性的技巧,需要的朋友可以参考下
textarea高度自适应js代码
01-06
textarea高度自适应的jquery插件
JS 9行代码实现Textarea高度自适应
m0_70975187的博客
02-20 1303
该代码主要利用了最简单的获取和设置输入框高度来计算行数,不必计算输入内容或者其他巴拉巴拉的方式去计算 代码核心依赖为输入框的行高,所以请务必设置行高或通过其他方式获取行高 首先,输入框产生变化时,使输入框高度产生变化的条件有两个,分别为增加一行和删除一行
小技巧之textarea的动态高度计算
fastrack_15233866884的博客
12-08 945
【代码】【无标题】
js根据输入字符长度自动调整textarea高度
老徐的博客只有干货
03-07 1145
1.编写html&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;自动扩展文本框高度&lt;/title&gt; &lt;script type="text/javascript&qu
js根据输入的文本自动改变textarea框的高度
风如白话的博客
06-12 740
js根据输入的文本自动改变textarea框的高度 /*** 根据输入的文本自动改变textarea框的高度 @param {string} el 元素对象 如： document.querySelector(".list") @param {number} maxHeight 最大高度 @param {number} minHeight 最小高度 @example: autoTextarea(document.querySelector("#textarea"), 300,
IE浏览器让文本域自适应数据高度
最新发布
09-02
在IE浏览器中实现文本域自适应数据高度可以采用以下几种方法： #### 方法一：使用JavaScript动态调整高度 通过监听文本域的输入事件，动态计算文本内容的高度并调整文本域的高度。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IE Textarea Auto Height</title> <style> textarea { resize: none; overflow: hidden; } </style> </head> <body> <textarea id="myTextarea"></textarea> <script> var textarea = document.getElementById('myTextarea'); textarea.oninput = function () { this.style.height = 'auto'; this.style.height = this.scrollHeight + 'px'; }; // 初始化高度 textarea.oninput(); </script> </body> </html> ``` 在上述代码中，首先将文本域的 `resize` 属性设置为 `none` 以禁止用户手动调整大小，`overflow` 属性设置为 `hidden` 避免出现滚动条。然后监听 `input` 事件，在事件处理函数中先将文本域的高度设置为 `auto`，再将其高度设置为 `scrollHeight`，这样就能保证文本域的高度自适应内容高度。最后手动触发一次 `input` 事件来初始化高度。 #### 方法二：使用jQuery实现 如果项目中使用了jQuery，可以使用以下代码实现： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IE Textarea Auto Height with jQuery</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> textarea { resize: none; overflow: hidden; } </style> </head> <body> <textarea id="myTextarea"></textarea> <script> $(document).ready(function () { $('#myTextarea').on('input', function () { $(this).css('height', 'auto'); $(this).css('height', this.scrollHeight + 'px'); }).trigger('input'); }); </script> </body> </html> ``` 这里使用了jQuery的 `on` 方法监听 `input` 事件，在事件处理函数中同样先将文本域的高度设置为 `auto`，再设置为 `scrollHeight`。最后使用 `trigger` 方法触发 `input` 事件来初始化高度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值