2016-11-13 70 views
2

我有一个textarea,根据我输入的内容进行调整。我使用KyleMit这个解决方案来做到这一点。Textarea不会自动调整预先填充的值

HTML:

<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea> 

JS:

function textAreaAdjust(o) { 
o.style.height = "1px"; 
o.style.height = (25+o.scrollHeight)+"px"; 
} 

当用户键入的文本区域,但文本区域中有一个预填充值,这工作得很好。调整大小不适用于预先填写的值。它仅在用户开始在textarea上输入时调整大小。预填充的textarea

<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden">Identify, formulate, research literature, and analyze user needs and taking them into account to solve complex information technology problems, reaching substantiated conclusions using fundamental principles of mathematics, computing fundamentals, technical concepts and practices in the core information technologies, and relevant domain disciplines.</textarea> 

例如有没有一种方法,我可以通过CSS或JS解决这个问题?

+0

有什么用'rows'和'cols'属性问题? –

回答

0

你将不得不使用的这两行代码出的功能一样,所以这是在页面加载,以及时使用,

你可以给一个ID,文本区域,然后你可以调用这个方法的代码,然后把它在页面加载,它肯定会做工如下图所示

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="ISO-8859-1"> 
 
<title>Insert title here</title> 
 
</head> 
 
<body onload="callOnPageLoad()"> 
 
<script> 
 
function callOnPageLoad(){ 
 
\t document.getElementById("textareaEx").style.height="1px"; 
 
\t document.getElementById("textareaEx").style.height=(25+document.getElementById("textareaEx").scrollHeight)+"px"; 
 
\t } 
 
</script> 
 
<textarea onkeyup="callOnPageLoad()" id="textareaEx" style="overflow:hidden">Identify, formulate, research literature, and analyze user needs and taking them into account to solve complex information technology problems, reaching substantiated conclusions using fundamental principles of mathematics, computing fundamentals, technical concepts and practices in the core information technologies, and relevant domain disciplines.</textarea> 
 
</body> 
 
</html>