摘要:高度自适应文本域高度随内容自动变化,不会出现滚动条,可以有多种方法,除了用动态设置它的高度值以外还有其它更简单的方法。还有一种方法,利用兄弟节点撑开父级高度,设置高度为即可。
textarea高度自适应
文本域高度随内容自动变化,不会出现滚动条,可以有多种方法,除了用js动态设置它的高度值以外还有其它更简单的方法。
可以用div标签模拟textarea,将div的contenteditable属性设置成true,使内容可编辑,达到高度随内容变化的目的。contenteditable的兼容性很好。
还有一种方法,利用兄弟节点撑开父级高度,设置textarea高度为100%即可。
document.querySelecotr("textarea").oninput = function () { document.querySelector("pre span").innerHTML = this.value; }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/107722.html
摘要:今天的任务是生成一个高度自适应的而且也可以设置最小高度和最大高度。但是有一个问题当想从大变到小的时候,这个不能反映文字的实际高度,所以这个方法不是很适合。高度跟着文字的多少走的,而且不需要动画。用的方式生成一个无用的用来计算的高度。 今天的任务是生成一个高度自适应的textarea,而且也可以设置最小高度和最大高度。最简单的方法textarea的属性是overflow:auto;那么如...
摘要:但是现在产品经理说了需要这个文本框可以根据用户输入内容自适应其高度。想法很简单,当用户输入的文本超过了文本框自身高度时不是会出现滚动条嘛,那么自然而然就能想到这个属性。就应该是用户输入文本的真实高度,至少超过文本框既定高度时是这样。 文本框是很常见的输入控件,我相信只要写过表单的肯定接触过 textarea 这个元素。 OK。但是现在产品经理说了:需要这个文本框可以根据用户输入内容自适...
摘要:但是现在产品经理说了需要这个文本框可以根据用户输入内容自适应其高度。想法很简单,当用户输入的文本超过了文本框自身高度时不是会出现滚动条嘛,那么自然而然就能想到这个属性。就应该是用户输入文本的真实高度,至少超过文本框既定高度时是这样。 文本框是很常见的输入控件,我相信只要写过表单的肯定接触过 textarea 这个元素。 OK。但是现在产品经理说了:需要这个文本框可以根据用户输入内容自适...
阅读 1590·2021-09-02 09:55
阅读 1043·2019-08-30 13:19
阅读 1361·2019-08-26 13:51
阅读 1410·2019-08-26 13:49
阅读 2290·2019-08-26 12:13
阅读 415·2019-08-26 11:52
阅读 1865·2019-08-26 10:58
阅读 3053·2019-08-26 10:19