今天有个文本框自适应高度的需求,写了一下
<!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" οnkeyup="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>
完工,呵呵。