自适应高度的文本

雨点打透心脏的1/2处 2022-01-28 21:25 340阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>文本框高度自适应</title>
    <style type="text/css"> #shadow, #text { font: 12px/16px Arial; width: 200px; overflow: hidden; height: 16px; } #shadow { position: absolute; border-width: 0px; padding: 0px; visibility: hidden; } #text { resize: none; } </style>
    <script type="text/javascript"> /* by VILIC VANE Web www.vilic.info Email i@vilic.info */ window.onload = function () { var text = document.getElementById("text"); //用户看到的文本框 var shadow = document.getElementById("shadow"); //隐藏的文本框 text.oninput = //非IE的 text.onpropertychange = //IE的 onchange; function onchange() { shadow.value = text.value; setHeight(); setTimeout(setHeight, 0); //针对IE 6/7/8的延迟, 否则有时会有一个字符的出入 function setHeight() { text.style.height = shadow.scrollHeight + "px"; } } }; </script>
    </head>
    <body>
    <textarea id="text"></textarea>
    <textarea id="shadow"></textarea>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，340人围观）

还没有评论，来说两句吧...

相关阅读

相关高度自适应和高度塌陷

高度自适应的情况： 1. 高度不去设置，或者高度设置auto 内容撑开父元素的高度。 2. 内容撑开父元素的高度 -> 最小高度的设置 min-height 3. 浮动

灰太狼/ 2023年07月20日 08:22/ 0 赞/ 32 阅读

相关 ElementUI-textarea文本域高度自适应设置的方法

一、概述 textarea默认情况下，当超出范围后，会在右边显示滑动条 ![b0773135d85317606b5e96db93fd9ee1.png][] 体验不太

àì夳堔傛蜴生んèń/ 2023年01月13日 09:17/ 0 赞/ 377 阅读

相关 html页面高度自适应的特点,css如何高度自适应浏览器高度？

高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。 ![682b19391f3

悠悠/ 2022年10月06日 08:00/ 0 赞/ 354 阅读

相关 textarea的高度自适应

textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。例

柔情只为你懂/ 2022年09月29日 15:55/ 0 赞/ 308 阅读

相关总结iframe高度自适应，自适应子页面高度

在网上找了很多iframe的高度自适应，发现很多兼容性都不是很好，于是自己总结了一下。页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C

怼烎@/ 2022年07月24日 10:07/ 0 赞/ 329 阅读

相关 iframe自适应高度

[JS][]自适应高度，其实就是设置[iframe][]的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的，

落日映苍穹つ/ 2022年07月15日 15:49/ 0 赞/ 320 阅读

相关 iframe自适应高度

<iframeοnlοad="this.height=this.document.documentElement.scrollHeight"name="reportsFrame

柔光的暖阳◎/ 2022年04月14日 05:20/ 0 赞/ 364 阅读

相关 html textarea文本域高度自适应

1、可直接在 [菜鸟教程网站测试页面中测试][Link 1] <!DOCTYPE html> <html> <head> <meta cha

怼烎@/ 2022年03月17日 13:10/ 0 赞/ 329 阅读

相关自适应高度的文本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

雨点打透心脏的1/2处/ 2022年01月28日 21:25/ 0 赞/ 341 阅读

相关高度自适应

开发中遇到一个问题，要求不管在多高的屏幕下，图片(什么都行)到底部的距离都应该和psd一致，flash里面的问题 ![70][] //定义宽度 var psdWidth

约定不等于承诺〃/ 2021年09月16日 06:40/ 0 赞/ 531 阅读