Jquery中文网 > 脚本编程 > javascript > 正文 js 文本框高度自适应

js 文本框高度自适应

发布时间：2017-01-15 编辑：www.jquerycn.cn

jquery中文网为您提供js 文本框高度自适应等资源，欢迎您收藏本站，我们将为您提供最新的js 文本框高度自适应资源

大家可能会提出一个常见的方案, 也就是利用textarea自身的scrollHeight属性. 不错, 但是当textarea变高之后, 即使内容删掉, 也变不回原来的高度了. 但, 如果说, 一个textarea的高度很小, 那么scrollHeight不就一直都表示内容的高度了么? 这就是key所在了, 用div做副本不行, 我们可以用textarea

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <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></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
js控制iframe高度/宽度自适应
 js控制文本框自动适应文本长度的例子
 js控制textarea输入框根据内容自动适应高度
 js 文本框高度自适应
 基于jQuery实现左右div自适应高度完全相同的代码
 js自适应图片宽高示例代码
 JS获取图片宽高并根据图片大小自适应
 css 高度自适应代码与自适应高度css兼容ie,firefox
js判断当前页面是否被iframe引用的方法
 jquery插件制作自增长输入框实现代码

上一篇：基于jquery插件之自动添加删除行效果下一篇：js 检查上传前图片的类型代码

[关闭]

js 文本框高度自适应

最近更新

浏览排行