html5 textarea高度自适应,textarea 高度自适应的两种方案

本文介绍了textarea高度自适应的两种方案:方案一利用textarea的input事件和scrollHeight属性,通过设置height来实现高度随内容变化;方案二使用contenteditable属性的div,天然支持高度自适应。同时,文章探讨了焦点定位、粘贴图片和文本的支持。

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

原标题:textarea 高度自适应的两种方案

本文转载于 SegmentFault 社区

社区专栏:前端学习路-郭盖

作者: 郭盖

阅读全文你将获得以下解决方案:

1. 点击长文本编辑textarea,自动获得焦点

2. 随着输入值自动伸缩高度

3. 可复制添加信息

4. 可粘贴文本

5. 可粘贴图片

以下实例代码执行环境为 Chrome80

方案一

HTML5 Textarea 元素

1. 自动获得焦点

点击编辑自动获得焦点后光标跳转到了最前面,why?

75907227eb39845a36a78e22aad80c79.png

查文档 MDN,textarea元素存在selectionEnd和selectionStart的属性用来表示选中的文本开始位置和结束位置,DOM 接口实例是HTMLTextAreaElement, 它具有setSelectionRange方法,用来选中输入框中的文本,用法:TextAreaElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection);

那么我们只要做到selectionStart === selectionEnd === value.length, 这样光标就选中到最末尾。

edit.addEv

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值