textarea只能5行，每行40个字符，总共字符不能超过200

这样做有什么目的吗?textarea容易判断总字符吧，每行都要判断，这有点难，中文跟英文字符一样吗，如果从中间插入字符怎么处理？

<textarea name="textarea" cols="40" rows="5" style="margin:0px; padding:0px;" maxlengt="200"></textarea>
这样定义就一行40个字符，一共5行了

倒，忘了textarea没有maxlength属性

<textarea name="textarea" cols="40" rows="5"> </textarea>
这里5行只是在页面height显示成5行，超过5行就会出现滚动条垂直滚动条，要加js判断
<textarea id="textarea" cols="40" rows="5"> </textarea>
<input type="button" onclick="return aaa()" value="check">
<script>
//获得字符串字节数
String.prototype.bLength=function(){
   return this.replace(/[^\x00-\xff]/g,"..").length;
}function aaa()
{
   if(document.getElementById("textarea").value.bLength()>200)
   {
       alert("length不能超过200");
       return false;
   }
   return true;
}
</script>

LS的，你自己测试你的代码<textarea id="textarea" cols="40" rows="5"> </textarea>
这个一行够40个字符吗？呵呵最多是39个字符
不信你自己测试

应该不会吧
<textarea id="textarea" cols="40" rows="5" >1111111111111111111111111111111111111111</textarea>
<input type="button" onclick="return aaa()" value="check">
<script>
//获得字符串字节数
String.prototype.bLength=function(){
   return this.replace(/[^\x00-\xff]/g,"..").length;
}function aaa()
{
   alert(document.getElementById("textarea").value.bLength());//40
   if(document.getElementById("textarea").value.bLength()>200)
   {
       alert("length不能超过200");
       return false;
   }
   return true;
}
</script>

呵呵，你别那么自信我估计你对HTML的一些东西你不够了解
告诉你，你自己不实验一下你就说不会吧

要不你直接复制：
我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<script>
function show(obj)
{
if(obj.value.length>200){
alert('不能超过200字符')
obj.value=obj.value.substr(1,200)
return false
}
}
</script>
<textarea name="textarea" cols="40" rows="5" style="margin:0px; padding:0px;" onblur="show(this)"></textarea>
</body>
</html>和你的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<textarea id="textarea" cols="40" rows="5" >1111111111111111111111111111111111111111</textarea>
<input type="button" onclick="return aaa()" value="check">
<script>
//获得字符串字节数
String.prototype.bLength=function(){
   return this.replace(/[^\x00-\xff]/g,"..").length;
}function aaa()
{
   alert(document.getElementById("textarea").value.bLength());//40
   if(document.getElementById("textarea").value.bLength()>200)
   {
       alert("length不能超过200");
       return false;
   }
   return true;
}
</script>
</body>
</html>
比较一下看看我说得对不对

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<script>
function show(obj)
{
if(obj.value.length>200){
alert('不能超过200字符')
obj.value=obj.value.substr(1,200)
return false
}
}
</script>
<textarea name="textarea" cols="40" rows="5" style="margin:0px; padding:0px;" onblur="show(this)">1234512345123451234512345123451234512345</textarea>
</body>
</html>
呵呵，下面是你的代码，复制2段回去自己测试吧，不想多说什么
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<textarea id="textarea" cols="40" rows="5" >1234512345123451234512345123451234512345</textarea>
<input type="button" onclick="return aaa()" value="check">
<script>
//获得字符串字节数
String.prototype.bLength=function(){
   return this.replace(/[^\x00-\xff]/g,"..").length;
}function aaa()
{
   alert(document.getElementById("textarea").value.bLength());//40
   if(document.getElementById("textarea").value.bLength()>200)
   {
       alert("length不能超过200");
       return false;
   }
   return true;
}
</script>
</body>
</html>

LZ如果想用JS验证每行字符数的话，可以这样：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<script>
function show(obj)
{
if(obj.cols>40){
alert('不能超过40字符')
return false
}
if(obj.value.length>200){
alert('不能超过200字符')
obj.value=obj.value.substr(1,200)
return false
}
}
</script>
<textarea name="textarea" cols="40" rows="5" style="margin:0px; padding:0px;" onblur="show(this)">1234512345123451234512345123451234512345</textarea>
</body>
</html>

晕，这我的确不知道，学习了，可能我用的是IE吧，测不出？！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<textarea id="textarea" cols="40" rows="5" >1234512345123451234512345123451234512345</textarea>
<input type="button" onclick="return aaa()" value="check">
<script>
//获得字符串字节数
String.prototype.bLength=function(){
   return this.replace(/[^\x00-\xff]/g,"..").length;
}function aaa()
{
   alert(document.getElementById("textarea").value.bLength());//40
   if(document.getElementById("textarea").value.bLength()>200)
   {
       alert("length不能超过200");
       return false;
   }
   return true;
}
</script>
</body>
</html>

IE一样的是你根本就不知道而已或者你根本就没在意
在IE下也是如此

我做东西三个浏览器一起看：
IE6 FF3.0 maxthon

{margin:0;padding:0;} css，这个的确不在行

substr 不是从 0 开始的么？

我也不是什么大师那些其实只是最基本的HTML知识

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  <title> new document </title>
  <script type="text/javascript" src="gaoUtil.js"></script>
</head><script type="text/javascript">
window.onload = function() {
  var c = new Count('txt', 'info', 200);
  c.initBasic();
}
</script><style type="text/css">
#txt {
  font-size: 9pt;
  font-family: 宋体;
  width: 182pt;
  line-height: 12pt;
  height: 62pt;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style><body>
  <form action="#" method="post">
    <label>
      输入文字：<textarea name="txt" id="txt" cols="40" rows="5"></textarea>
    </label>
    <span id="info"></span><br/>
    <input type="submit" value="提交">
  </form>
</body>
</html>gaoUtil.js
window.$ = function(id) {
  if(typeof id == 'string') {
    return document.getElementById(id);
  }
  return id;
}/* 工具函数 */
String.prototype.trim = function() {
  return this.replace(/^\s+/, '').replace(/\s+$/, '');
}String.prototype.byteLength = function() {
  var len = 0;
  for(var i = 0, k = this.length; i < k; i++) {
    len = (this.charCodeAt(i) > 0xff) ? len + 2 : len + 1;
  }
  return len;
}var Gao = {}Gao.isIE = navigator.userAgent.indexOf('MSIE') > -1;
Gao.isGecko = navigator.userAgent.indexOf('Gecko') > -1;/**
* 事件处理工具类
*/Gao.Event = {  /**
   * 为 element 使用 handler 处理程序添加至 event 事件
   * 兼容 IE 及 Firefox 等浏览器
   *
   * 例如为 botton 对象添加 onclick 事件，使用 clickEvent
   * 方法作为处理程序：
   *   Event.addEvent(botton, 'click', clickEvent);
   *
   * @param element  需要添加事件的对象（Object）
   * @param event    需要添加的事件名称（String），不加“on”
   * @param handler  需要添加的方法引用（Function）
   */
  addEvent : function(element, event, handler) {
    if(element.attachEvent) {
      element.attachEvent('on' + event, handler);
    } else if (element.addEventListener) {
      element.addEventListener(event, handler, false);
    } else {
      element['on' + event] = handler;
    }
  },  /**
   * 添加事件处理程序时，只能添加一个方法的引用，并不能给
   * 方法加上参数。比如定义了 clickEvent(str) 这个方法，现
   * 在要将其作为 obj 的 onclick 的事件处理程序，就可以用：
   * obj.onclick = Event.getFuntion(null, clickEvent, str);
   *
   * @param obj      需要绑定事件处理函数的所有者，null 表示 window 对象
   * @param fun      需要绑定的事件处理函数名
   * @param ...      第三个参数开始为绑定事件处理函数的参数，由 0 到多个构成
   */
  getEventHandler : function(obj, fun) {
    var args = [];
    obj = obj || window;
    for(var i = 2; i < arguments.length; i++) {
      args.push(arguments[i]);
    }
    return function() {
        fun.apply(obj, args);
      };
  }
}/**
* 用于实时统计文本域中的字符数量
*
* @param textId   文本域（textarea）的 id
* @param msgId    用于数量显示的容器 id
* @param max      最大的字符数量
* @param info     超过最大字符数量时显示的信息（无参数时不显示任何信息）
* @param normalColor  数量显示容器中，在低于 max 字符时显示的颜色（默认为黑色）
* @param overColor    数量显示容器中，在大于 max 字符时显示的颜色（默认为红色）
*/
Gao.Count = function(textId, msgId, max, info, normalColor, overColor) {
  this.text         = $(textId);
  this.msg          = $(msgId);
  this.max          = max || 100;
  this.normalColor  = normalColor || 'black';
  this.overColor    = overColor || 'red';
  this.info         = info || '';
}Gao.Count.prototype = {
  initBasic : function() {
    if(Gao.isIE) {
      Gao.Event.addEvent(this.text, 'propertychange', Gao.Event.getEventHandler(this, this._basicCount));
    }else if(Gao.isGecko) {
      Gao.Event.addEvent(this.text, 'input', Gao.Event.getEventHandler(this, this._basicCount));
    }
    this._basicCount();
  },  _basicCount : function() {
    var txt = this.text.value;
    if(txt.byteLength() > this.max) {
      while(txt.byteLength() > this.max) {
        txt = txt.substr(0, txt.length - 1);
      }
      this.text.value = txt;
    }
    var r = txt.byteLength();
    this.msg.style.color = (r > this.max) ? this.overColor : this.normalColor;
    this.msg.innerHTML = r;
  }
}

可能我一开始我没有说清楚cols="40"，超出会回换行，我不需要它自动换行，我用word-wrap : normal;实现在一行中总字符串个数我已经解决了现在的问题是，我换行只能用回车并且回车只能有5个，也就是5行，超出按回车无效每一行我最多只能输入40个字符应用案例：
1.我可以输入5个回车
2.最多只能是5行，每一行最多是40个字符
3.我在一行中输入“1”，按住键不放，一直到40个的时候，超出无效，最多就是40

超出无效的意思是截掉，还是怎么着？可以在提交时使用 split(/\n/); 将字符串拆分成数组，再循环遍历这个数组获得长度就可以了。

如果加上换行符的话，在 IE 下每个换行符需要占用两个字节的长度，Firefox 下占用一个字节的长度。

就跟textbox设置长度40个，按一个键不放，最多40，效果一样

不自动换行不是用这个word-wrap : normal

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  <title> new document </title>
  <script type="text/javascript" src="gaoUtil.js"></script>
</head><script type="text/javascript">
window.onload = function() {
  var c = new Gao.Count('txt', 'info', 200);
  c.initBasic();
}var MAX_ROWS = 5;
var MAX_COLS = 40;function check(frm) {
  var t = frm.txt;
  var arr = t.value.split(/\r?\n/);
  if(arr.length > MAX_ROWS) {
    alert('不能超过 ' + MAX_ROWS + ' 行');
    t.focus();
    t.select();
    return false;
  }
  var info = [];
  for(var i = 0; i < arr.length; i++) {
    if(arr[i].byteLength() > MAX_COLS) {
      info.push(i + 1);
    }
  }
  if(info.length > 0) {
    alert('第 ' + info.join(',') + ' 行，超过了 ' + MAX_COLS + ' 个字符');
    t.focus();
    t.select();
    return false;
  }
  return true;
}
</script><style type="text/css">
#txt {
  font-size: 9pt;
  font-family: 宋体;
  width: 182pt;
  line-height: 12pt;
  height: 62pt;
  margin: 0;
  padding: 0;
  overflow: auto;
}
</style><body>
  <form action="" method="post" onsubmit="return check(this)">
    <label>
      输入文字：<textarea name="txt" id="txt" wrap="hard"></textarea>
    </label>
    <span id="info"></span><br/>
    <input type="submit" value="提交">
  </form>
</body>
</html>

<textarea name="textarea" cols="40" wrap="off" rows="5" style="margin:0px; padding:0px;" onblur="show(this)">1234512345123451234512345123451234512345</textarea>这样他就不会自动换行了

wrap="hard"用这个也不行的
这个也回有自动换行的不自动换行是用wrap="off"

直接用5个text控件省事。
给个textarea却限制这么多，会严重误导用户，不符合用户体验原则。

<table border="0"><tr><td style="border:solid 1px #808080;"><script>
document.write(((new Array(6)).join('<br><input style="border:none;" size="40" maxlength="40" onkeydown="kd(this)">').substr(4)));
</script></td></tr></table>

调试易

textarea只能5行，每行40个字符，总共字符不能超过200

解决方案 »