控制Textarea的最大行数

最新推荐文章于 2023-10-01 08:00:00 发布

原创最新推荐文章于 2023-10-01 08:00:00 发布 · 5.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML #ViewUI

JAVASCRIPT 专栏收录该内容

10 篇文章

订阅专栏

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

控制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="提出" onclick="return teisyutu();">
</span>
</form>
</body>
</html>