<!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" οnfοcus="AddInterval(this)"
οnblur="clearInterval(this.clock);"></textarea>
<br /><br />
方法二:如果输入的列数大于cols,则自动添加一行<br />
<textarea rows="2" cols="25" id="myText2" οnfοcus="ResizeText(this,2)"
οnclick="ResizeText(this,2)" οnkeyup="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>
<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" οnfοcus="AddInterval(this)"
οnblur="clearInterval(this.clock);"></textarea>
<br /><br />
方法二:如果输入的列数大于cols,则自动添加一行<br />
<textarea rows="2" cols="25" id="myText2" οnfοcus="ResizeText(this,2)"
οnclick="ResizeText(this,2)" οnkeyup="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>