控制Textarea的最大行数-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_10115/article/details/81803577

本文介绍了如何使用JavaScript来控制HTML中的Textarea元素显示的最大行数，通过代码示例展示了具体的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

控制Textarea的最大行数代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="description" content="Script to count and limit the number of lines and characters in a textarea">
<meta name="keywords" content="textarea, rows, lines, characters, limit, restrict, js, javascript, jscript">
<script type="text/javascript">
    function checkLimits(txtArea){
        var lineHeight = parseInt(txtArea.style.lineHeight.replace(/px/i, ''));
        var tr = txtArea.createTextRange();
        var maxLines = txtArea.rows;
        var maxChars = txtArea.rows * txtArea.cols;
        var txtAreaLines = Math.ceil(tr.boundingHeight / lineHeight);
        if (txtAreaLines > maxLines) {
            alert("最大行数を越えました！");
            return false;
        }
        return true;
    }
    function teisyutu(){
        var myText = document.getElementById("myText");
        if (!checkLimits(myText)) {
            return false;
        }
        return true;
    }
</script>
</head>
<body style="font-family:arial;">
<form name="myForm" method="post" action="">
<span style="textalign:left;">
<b>Limited Textarea</b> (cols = 44; rows = 4)
<br>
<br>
<textarea name="myText" id="myText" cols="44" rows="4" wrap="virtual" 
          style="font-family:arial; font-size:14px; line-height:17px; height:98px; overflow:auto;"></textarea>

<br>
<input type="button" name="btnSubmit" value="提出" οnclick="return teisyutu();">
</span>
</form>
</body>
</html>