textarea自适应高度

最新推荐文章于 2024-03-15 16:36:49 发布
最新推荐文章于 2024-03-15 16:36:49 发布
阅读量2.1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mt_sea/article/details/1745995
本文介绍了一个简单的JavaScript方法，用于实现HTML中的textarea元素自适应高度。通过监听页面加载完成事件并在加载完成后调整textarea的高度，可以确保文本区域随着输入内容的变化而自动调整大小。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目中要求textarea自适应高度，在网上找到这个很好的方法 。记录下来以后备用。

function BodyOnLoad()
  {
      var textarea= document.getElementById("textarea");
      textarea.style.posHeight=textarea.scrollHeight;

  }

scrollHeight：获取对象的滚动高度。

posHeight：设置或获取以 height 标签属性指定的单位的对象高度。

把方法加在body的onload事件上

<body  onload = "BodyOnLoad();">

textarea实现自适应高度
nanxing的博客
04-01 1197
textarea实现自适应高度 div属性contenteditable模拟textarea文本域轻松实现高度自适应 <div class='editor-text' contenteditable="true" //增加属性contenteditable @input="editorChange">{{content}} </div> 存在问题： 当在vue里使用时，进行相应式处理的时候实现v-model对应的操作时，在键盘上按下回删除的时候，失去在文章删除位置
textarea 自适应高度
yang_383536473的博客
11-11 556
$(document).on('input propertychange', 'textarea', function () { this.rows =1 // 先将 rows 设为1, ‘可以不设置试一试删除文本的时候会不会改变行高’ var text_height = $(this).height() // 获取textarea标签中文字所占高度 var padding_top_and_bottom = $(this).innerHeight() - text_height // 计算pa
Javascript 文本域根据输入内容自适应高度
weixin_34395205的博客
12-13 547
为什么80%的码农都做不了架构师？>>> ...
高度自适应的textarea
weixin_30553837的博客
12-23 196
$(function(){ $.fn.autoHeight = function(){ function autoHeight(elem){ elem.style.height = 'auto'; elem.scrollTop = 0; //防抖动 elem.style.height = elem...
jquery实现文本框textarea自适应高度
11-23
在网页设计中，为了提供更好的用户体验，经常需要对文本框（`textarea`）进行自适应高度的设置，以便用户在输入大量文字时，文本框能够自动扩展高度，避免出现滚动条。`jQuery`库提供了一个方便的方法来实现这一功能...
Textarea根据内容自适应高度
09-04
这个功能可以通过JavaScript来实现，正如标题“Textarea根据内容自适应高度”所描述的那样。本文将详细介绍如何使用JavaScript来控制`Textarea`的内容自适应高度，并提供相关代码示例。 首先，我们来看一下提供的...
基于jquery的让textarea自适应高度的插件
10-28
这就是"基于jQuery的让textarea自适应高度的插件"所解决的问题。 这个插件的核心功能在于，当用户在textarea中输入文字时，插件会实时监测textarea的高度，并自动调整以适应内容的长度。这样，textarea的高度将始终...
JS控制TextArea自适应高度，适用于IE、Chrome、Safari等浏览器
11-19
这种主要在手机端应用较为广泛，当前PC也是可以用的了。 使用简单，也可以通过JS触发事件调整大小
textarea的自适应高度
weixin_59787755的博客
03-15 3588
场景：textarea的高度需要随着输入内容的增加而增加。方法一：div模拟textarea。方法二：监听输入事件+窗口滚动高度。
textarea高度自适应
12-13 3255
方法一、直接在textarea中添加oninput方法： <textarea oninput="this.style.height = this.scrollHeight + 'px';"></textarea> 说明： 在IE下可以根据输入的内容自适应高度，但是在谷歌浏览器下随着输入的字数越多，高度越高，比实际的高度要高出很多； 方法二、...
textarea的高度自适应
热门推荐
樊小书生
03-16 1万+
textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。
vue textarea 自适应高度
weixin_43939356的博客
01-07 2626
vue textarea 自适应高度1.关闭textarea标签的右下角拖动2.给标签绑定数据和添加ref3.通过input监听输入值后标签的高度变化4.通过监听来动态设置高度 1.关闭textarea标签的右下角拖动 style=“resize:none;” 2.给标签绑定数据和添加ref <textarea class=“list_textarea” ref=“lczdTxt” s...
textarea文本框根据输入内容自动适应高度
Girasoles的博客
05-17 4304
第一种：添加样式"no-scroll"加一个监听该文本框内容变化的方法。
textarea自适应高度 vue
最新发布
08-07
- 参考站内引用：提供了四个引用，关于Vue中textarea自适应高度的实现方法。 站内引用总结： - [^1]: 绑定ref和input属性，使用@input事件。 - [^2]: 使用style="resize:none;", 绑定ref和v-model, 监听input事件，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值