素材巴巴 > 程序开发 >

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

程序开发 2023-09-02 22:12:19

原标题: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


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。