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>



留言

熱門文章