textarea自适应高度

来源：互联网发布：手机图文制作软件编辑：程序博客网时间：2024/05/20 10:20

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>textarea自适应文本高度</title>
<style>
#myText1{
font-size:20px;
overflow:scroll;
overflow-y:hidden;
overflow-x:hidden;
resize:none;
}
#myText2{
overflow:hidden;
font-size:20px;
}

</style>
</head>

<body>
方法一：点击文本框，自动向下进行滑动；点击文本框外面的，则停止滑动<br />
<textarea rows="1" cols="25" id="myText1" onfocus="AddInterval(this)"
onblur="clearInterval(this.clock);"></textarea>
<br /><br />

方法二：如果输入的列数大于cols,则自动添加一行<br />
<textarea rows="2" cols="25" id="myText2" onfocus="ResizeText(this,2)"
onclick="ResizeText(this,2)" onkeyup="ResizeText(this,2)"></textarea>
<br /><br />

方法三：如果输入的列数大于cols,则自动添加一行<br />
<textarea id="myText3" cols="" rows="" ></textarea>

<script>
//方法一
function AddInterval(a){ //a是参数 clock:计时函数
window.activeobj=a;a.clock=setInterval(function(){
activeobj.style.height=activeobj.scrollHeight+'px';
},500);
}

//方法二：
var agt=navigator.userAgent.toLowerCase(); //判断浏览器类型
var is_op=(agt.indexOf("opera") != -1);
var is_ie=(agt.indexOf("msie") != -1) && document.all && !is_op;

function ResizeText(text,row){
if(!text){return;} //没有文本框，则返回
if(!row){row=3;}

var lineFeed=text.value.split("\n"); //spilt()吧字符串分割成字符串数组
var browser=is_ie?1:0;
browser+=lineFeed.length; //文本框的行数

var d=text.cols; //文本框的列数
if(d<=25){
d=25;
}

for(var e=0;e<lineFeed.length;e++){
if(lineFeed[e].length>=d){
//Math.ceil()向上取整;一旦列数大于25，则添加一行
browser+=Math.ceil(lineFeed[e].length/d);
}
}
browser=Math.max(browser,row);
if(browser!=text.rows){
text.rows=browser;
}
}

//方法三
//Handler用于异步消息处理；addEventListener（做兼容）侦听事件并处理相应的函数
//W3C格式：addEventListener；ie格式：attachEvent
var addHandler=window.addEventListener?
function(elem,event,handler){elem.addEventListener(event,handler);}:
function(elem,event,handler){elem.attachEvent("on"+event,handler);};
var $=function(id){return document.getElementById(id);}

function autoText(elemid){ //elemid:参数，代表文本框
if(!$("_textareaCopy")){ //创建元素，添加属性
var t=document.createElement("textarea");
t.id="_textareaCopy";
t.style.position="absolute";
t.style.left="-9999px";
document.body.appendChild(t);
}
function change(){
$("_textareaCopy").value=$(elemid).value;
$(elemid).style.height=$("_textareaCopy").scrollHeigh;
/*后面这一段可以省略+$("_textareaCopy").style.height+"px"*/

}
//propertychange，只要当前对象属性发生改变
//input，当input的value发生变化就会发生，无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化
addHandler($("myText3"),"propertychange",change); //for IE
addHandler($("myText3"),"input",change); //for!IE
$(elemid).style.overflow="hidden";
$(elemid).style.resize="none";
}

addHandler(window,"load",function(){
autoText("myText3");
});
</script>
</body>
</html>

阅读全文

0 0