说明书大全网 - 海量说明书在线查询
手机版  |  网站地图

textarea滚动条怎么用(一个听话的textarea标签)

怎么让textarea随着文字高度自动改变

有一次项目开发中遇到这样一个需求,在不确定文本内容的多少情况下,怎么做到元素能随文本大小实时显示。当然说到文本,首先想到的是input标签和textarea标签。但是,这两个标签好像都不能实现项目需求,但相对之下,后者通过js改造还是有很大希望实现的。

心动不如行动,然后就分析起来:

通过js来实时控制textarea的高度。

(1)首先创建一个函数,计算因边框和轮廓产生的高度差异

(2)设置高度为0以防需要收缩(高度)

(3)设置正确的高度 scrollHeight 是文本内容的全部高度,而不仅仅是可见部分的

(4)如果文本域有边距,我们需要设置box-sizing: border-box

(5)我们不需要滚动条

(6)当窗口大小改变时,我们需要重新调整高度(例如方向变化)

(7)高度初始化

ok,思路有了,那就一点一点把代码码出来

function textareaHeight(textareaElement, minHeight) {

// 计算因边框和轮廓产生的高度差异

var outerHeight = parseInt(window.getComputedStyle(textareaElement).height, 10);

var diff = outerHeight - textareaElement.clientHeight;

// 设置高度为0以防需要收缩(高度)

textareaElement.style.height = 0;

// 设置正确的高度

textareaElement.style.height = Math.max(minHeight, textareaElement.scrollHeight + diff) + 'px';

}

// 我们使用" image_type="1" mime_type="image/jpeg" web_uri="pgc-image/d9e58a91563e44b08cb1da67b3d25cb8" style="height: auto;"/>

相关文章

最新文章

NEW

热门推荐

HOT