textarea行数和字数的控制

限制文本区域输入

最新推荐文章于 2025-07-26 10:47:10 发布

原创最新推荐文章于 2025-07-26 10:47:10 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML #ViewUI

JAVASCRIPT 专栏收录该内容

10 篇文章

订阅专栏

请参看代码，实现的功能如题：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<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 getLines(txtArea) 
{
  var lineHeight = parseInt(txtArea.style.lineHeight.replace(/px/i,''));  
  var tr = txtArea.createTextRange(); 
  return Math.ceil(tr.boundingHeight/lineHeight);
}
function checkLimits(txtArea)
{
  var maxLines = txtArea.rows;
  var maxChars = txtArea.rows * txtArea.cols; 
  if((txtArea.value.length >= maxChars || getLines(txtArea) >= maxLines) 
    && (window.event.keyCode == 10 || window.event.keyCode == 13))
  {
    while(getLines(txtArea) > maxLines)
      txtArea.value = txtArea.value.substr(0,txtArea.value.length-2);
    while(txtArea.value.length > maxChars)
      txtArea.value = txtArea.value.substr(0,txtArea.value.length-2);
      //alert("limits reached"); 
  }
  else if(txtArea.value.length > maxChars )
  {
    while(txtArea.value.length > maxChars)
      txtArea.value = txtArea.value.substr(0,txtArea.value.length-1);
      //alert("chars limit reached"); 
  }
  else if (getLines(txtArea) > maxLines)
  {
    while(getLines(txtArea) > maxLines)
      txtArea.value = txtArea.value.substr(0,txtArea.value.length-1);
      //alert("lines limit reached");
  }
}
//-->
</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;"
          onKeyUp="checkLimits(this);"
          onPaste="checkLimits(this);"
          onCut="checkLimits(this);"
          onBlur="checkLimits(this);"></textarea>

<br>
</span>
</form>
</body>
</html>