textarea 实现高度自动增长

有时候希望textarea 能够自动调整高度来适应输入的内容

网上看到了很多解决方案,比如动态创建一个隐藏的div,当用户输入的时候将textarea的内容绑定到div,由于div的高度会自动撑开,因此可以动态检测div的高度,然后将div的高度复制给textarea。这个方法应该是兼容性较好而且比较稳健的办法,但实在太繁琐

还有一个解决办法就是动态将textarea的scrollHeight 复制给高度。我采用的是后者

1

2

3

4

5

6

7

8

9

10

11

12

13

14
var textarea = document.getElementById('textarea');

textarea.style.overflow = 'hidden';

var height = parseInt(window.getComputedStyle(textarea).height);

var width = parseInt(window.getComputedStyle(textarea).width);

var autoHeight = function() {

if(this.scrollHeight <= height || this.value == '') {

this.style.height=height + &#39 大专栏  textarea 实现高度自动增长;px';

return;

}

this.style.height = this.scrollHeight +  'px';

}

textarea.oninput = autoHeight;

这个方法就是通过监听textarea的oninput 来实现,也可以监听keyup,keydown;但是如果使用keyup或者keydown来监听的话会存在一个问题,那就是如果textarea有复制或者剪切操作,keyup,keydown不会立即响应内容的变化,并且也不能响应鼠标右键粘贴。

最后再象征性地增加兼容

1

2

3

4

5

6
textarea.onpropertychange = function (event) {

if(event.propertyName.toLowerCase() == 'value') {

autoHeight();

console.log(this.value);

}

}

然而悲伤的是这种方式并不适用移动端,移动端所有浏览器均测试无效

另外还有一个解决办法就是不使用textarea,而是使用普通div模拟textarea,因为div本身高度就自动增长,所有就不用担心其他问题了。实现方式就是给div设置属性contentEditable=true,这样div就变为可编辑的了。不过这种方式在某些firefox上面,div外层会出现虚框,从而使得div的本质暴露无疑。解决办法就是css配置outline:0 none

原文地址:https://www.cnblogs.com/lijianming180/p/12258990.html

时间: 2024-10-08 03:05:35

textarea 实现高度自动增长的相关文章

监听textarea输入文本变化,让textarea高度自增长

原本textarea只有一行高,随着输入字数的增多,默认增长,通常会用在移动端产品输入上 使用oninput比onkeyup更适合手机端 <textarea id="txtContent" class="j_comment_in comment-input" rows="1" oninput="ResizeTextarea('txtContent')" style="overflow-y:hidden;&quo

textarea高度自动增高

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 随着textarea 输入内容 自动增加高度 <script type="text/javascript">     $(".input_textarea").each(function(){         this.style.height=this.scrollHeight+'px';     });     $(".input_textarea").

如何让 textarea 文本框 高度自动伸缩

个人博客:柚子青年. 原文链接:如何让 textarea 文本框 高度自动伸缩 本文主要讲的是如何让 textarea 文本框 自动伸缩 原理:每次输入文字后重置文本框默认高度 判断是否出现滚动条 动态修改高度 . $(this).change(function () { this.style.height = 'height'; // height = textarea 默高度 if (this.scrollHeight >= this.offsetHeight) { // 判断是否出现滚动条

div模拟textarea自适应高度

之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着输入行数的增多而增大,于是我上网寻求了下帮助,发现大神张鑫旭的这篇文章<div模拟textarea文本域轻松实现高度自适应>,成功解决我的问题 代码如下: 1 1 <!DOCTYPE html> 2 2 <html lang="en"> 3 3 <

mysql字段是自动增长类型结果却不是连续的

今天建了一张表,设置其"id"属性为自动增加类型,但是在查看所有数据的时候,却发现"id"的值不是连续增加的.建表的语法如下: mysql> create table person_list -> ( -> id int auto_increment unique, -> name varchar(15) not null, -> sex varchar(15) default "中", -> ID_C var

备忘:Hibernate id注解,自动增长

ID自动增长 @Id @GeneratedValue(strategy=GenerationType.IDENTITY) .

textarea自适应高度

最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个textarea,其中一个textarea设置其absolute,设置其不可见.当输入文本的textarea的值变化时,将原本的textarea中的值copy到新的 textarea中,这样可以准确计算高度(注意在copy节点的时候新旧textarea的宽度是一样的). 为什么不直接用原textarea

SQL Server 2012 自动增长列,值跳跃问题

介绍 从 SQL Server 2012 版本开始, 当SQL Server 实例重启之后,表格的自动增长列的值会发生跳跃,而具体的跳跃值的大小是根据增长列的数据类型而定的.如果数据类型是 整型(int),那么跳跃值为 1000:如果数据类型为 长整型(bigint),那么跳跃值为 10000.从我们的项目来看,这种跳跃问题是不能被接受的,尤其是展示在客户端的时候.这个奇怪的问题只在 SQL Server 2012 及更高的版本中存在,SQL Server 2012之前版本不存在此问题. 背景

oracle 数据表中实现字段的自动增长

由于一直用的是Mysql数据库,今天刚好心血来潮,想着和Java都是同一个老板出来的oracle自己却不会,说出去会不会有点丢人,故就开始翻资料,看视频搞起来,一步一个脚 印,想着写点什么,就开始从创建表开始吧,好了,废话不多说了,开始上正题创建一个表: User表: create table user(    id number(5,0) not null primary key auto_increment,    deptid number(5,0) not null,    userna