JS案例 - 可自动伸缩高度的textarea文本框

文本框的默认现象：

• textarea如果设置cols和rows来规定textarea的尺寸，那么textarea的默认宽高是这俩属性设置的值，可以通过鼠标拖拽缩放文本框的尺寸。
• textarea如果设定了宽高，那么如果文本超出框的高度，会自动出现滚动条。而不会撑开文本框的高度。
• 如果什么也不设置，最小宽高很窄很细，随便输入内容也会超出文本框隐藏，且自动增加滚动条。

    

 

首先先做一些表面工作：

设置一些样式

?

1 2 3 4 5 6

width: 300px; height: 300px; border: 1px solid royalblue; padding: 20px; border-radius: 5px; resize: none;

　　 resize：none； 去掉右下角的这个可自动伸缩的样子和功能。

然后文字输入多了，默认就成了这样：

 

因为文本框的宽高固定死了， 还是超出出现了滚动条。

 

怎么让文本框初始化设置一定的高度，但是文字超出时自动跟随内容的高度伸缩？

答： 初始化高度通过css设置(如上)，自动伸缩的高度值通过js来计算(如下)。

 

如果js计算的话，就需要事件触发，用change事件？

答：但是change事件体验不好。

为什么？

change事件的现象是，输入框失去焦点的时候才会触发。如果文本框内容超出高度然后用户还在输入的时候，体验就会很不好。而且如果用户一直不点击别的地方让textarea失去焦点，这个事件就永远不会触发，文本框的高度就不变。

比如输入过程中，就成了这样：

然后点击别的地方才会一次性的展开：

 

所以需要每次输入的时候就触发计算，就得用键盘事件而不是change事件：

键盘事件需要监听的是键每次弹起的时候，即keyup事件（刚才想了想，貌似监听keydown按压事件也不是不可以的）

 每次事件触发的时候，需要做什么？

答：就是计算文本框的滚动高度，即内容高度

具体怎么做？

答：键盘每次弹起的时候，获取文本框的内容高度添加给文本框的高度，即可让其实时的跟随内容自适应。

内容高度用什么属性计算？

即：scrollHeight：给定对象的滚动高度，即内容的可视高度。

?

1 2 3 4 5 6 7

function textareaH(box){   let obj = $(box);   obj.style.height = obj.scrollHeight + 'px'; } $('textarea').on('keyup',function(){   textareaH('textarea'); });

　　

 如果一个页面有多个textarea都需要这个怎么办？一个一个的加或者调用封装函数？

不用，可以在计算高度的时候获取多个，并循环计算:

?

1 2 3 4 5 6 7 8 9

function textareaH(){   let obj = $('textareaClass'),       len = obj.length;   for (let i = 0; i < len; i++) {       // console.log(obj[i]);       obj[i].style.height = 'auto';       obj[i].style.height = obj[i].scrollHeight + 'px';   } }

　　

 

2018-08-22  19:49:56