autosize实现textarea标签高度自适应

阙弘博
2023-12-01

autosize.js是一个自动调整大小是一个小的脚本,可以自动调整文本区域的高度以适合文本内容。

我们很多地方都能用的到,比如textarea 里面有初始化内容,高度默认100px,当鼠标点击进去的时候,文本区域高度自适应内容高度显示,方便编辑内容。

官方网址:Autosize

使用方法:
autosize 函数接受单个 textarea 元素,或者 textarea 元素的数组或类似数组的对象(如 NodeList 或 jQuery 集合)。

// from a NodeList
autosize(document.querySelectorAll('textarea'));

// from a single Node
autosize(document.querySelector('textarea'));

// from a jQuery collection
autosize($('textarea'));

方法

名字描述
autosize.update(elements)

触发指定文本区域元素的高度调整。自动调整大小将自动调整键盘和窗口大小调整事件的文本区域高度。自动调整大小没有有效的方法来监视另一个脚本何时更改了文本区域值或影响文本区域元素的布局更改。

// Init
var ta = document.querySelector('textarea');
ta.style.display = 'none';
autosize(ta);

// Change layout
ta.style.display = 'block';
autosize.update(ta);

// Change value
ta.value = "Some new value";
autosize.update(ta);
Autosize.destroy(元素)

删除自动调整大小并还原它对文本区域元素所做的任何更改。

autosize.destroy(document.querySelectorAll('textarea'));
 类似资料: