`
tdmlxq
  • 浏览: 37863 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

textarea行数和字数的控制

JavaScriptHTML 
阅读更多

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

 

<!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>
 
分享到：
| frameset和body冲突
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics