element.scrollHeight可用來讓textarea tag自動調整文字行數
一直想說element.scrollHeight有什麼實用的功能可用?
看到這個練習題, 覺得用的很好,
想要做的功能是: 讓文字區域能隨著文字行數自我調整高度,
完整程式碼如下:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<h2>TextArea自我調整文字行數</h2>
<textarea rows=1 name=s1 cols=27 id="autoRow"></textarea>
<script type="text/javascript">
window.onload = function(){
var autoRow = document.getElementById("autoRow");
autoRow.style.overflowY = "hidden";
autoRow.onkeyup= function(){
autoRow.style.height = autoRow.scrollHeight;
};
};
</script>
</body>
</html>
看到這個練習題, 覺得用的很好,
想要做的功能是: 讓文字區域能隨著文字行數自我調整高度,
完整程式碼如下:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<h2>TextArea自我調整文字行數</h2>
<textarea rows=1 name=s1 cols=27 id="autoRow"></textarea>
<script type="text/javascript">
window.onload = function(){
var autoRow = document.getElementById("autoRow");
autoRow.style.overflowY = "hidden";
autoRow.onkeyup= function(){
autoRow.style.height = autoRow.scrollHeight;
};
};
</script>
</body>
</html>
留言
張貼留言