js实现文本框textarea高度自适应

来源：互联网发布：php 模拟post 编辑：程序博客网时间：2024/09/21 09:26

今天有个文本框自适应高度的需求，写了一下

<!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>文本框textarea高度自适应</title>    <script type="text/javascript">        function txtAutoHeight(id)        {                        var control = document.getElementById(id);            control.style.height = control.scrollHeight + "px";        }    </script></head><body>    <textarea id="txtContent" onkeyup="txtAutoHeight('txtContent')" style="overflow-y: hidden;" rows="8" cols="20"></textarea></body></html>

随之而来的问题是录入文字后一直在跳，而且如果是使用粘贴方式录入数据就捕获不到了，查了下可以使用即时监听输入框值的onpropertychange事件。

<textarea id="txtContent" onpropertychange="txtAutoHeight('txtContent')" style="overflow-y: hidden;" rows="8" cols="20"></textarea>

这次上边的问题解决了，但是这事件是IE专属的东西，其他浏览器不认，又去查了查可以用input，注意的是需要使用addEventListener注册。

<!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>文本框textarea高度自适应</title>    <style type="text/css">        #txtContent {            font-size:14px;            height:18px;            overflow-y:hidden;            padding:0;        }    </style></head><body>    <textarea id="txtContent"></textarea>    <script type="text/javascript" language="javascript">        var textarea = document.getElementById("txtContent");        if ("\v" == "v") {            textarea.onpropertychange = txtAutoHeight;        } else {            textarea.addEventListener("input", txtAutoHeight, false);        }        function txtAutoHeight() {            textarea.style.height = textarea.scrollHeight + 'px';        }    </script></body></html>

完工，呵呵。

0 0