textarea的实现

由于限制字数是用原有的 maxlength会有问题，所以用一般会用js控制，今天用到三种：

（一）html:

<body>
<form name=myform action="">
  <textarea name="message" cols="28" rows="5" onKeyDown="textCounter(message,remLen,30);" onKeyUp="textCounter(message,remLen,30);"></textarea>
  您还可以输入:<input name="remLen" type="text" value="6" size="5" readonly="readonly">个字符
</form>
</body>

js:

function textCounter(field, countfield, maxlimit) {
      // 函数，3个参数，表单名字，表单域元素名，限制字符；
      if (field.value.length > maxlimit)
      //如果元素区字符数大于最大字符数，按照最大字符数截断；
        field.value = field.value.substring(0, maxlimit);
      else
      //在记数区文本框内显示剩余的字符数；
        countfield.value = maxlimit - field.value.length;
    }

(二)控件 html:

<div>
  <textarea id="txtContent" cols="60" rows="10"></textarea>
</div>

js:

<script type="text/javascript" src="Js/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="Js/maxlength.js"></script>
  <script type="text/javascript" src="Js/jquery.maxlength-min.js"></script>
  <script type="text/javascript">
    $(document).ready(function (e) {
      $('#txtContent').maxlength(
          {
            maxCharacters: 50, //限制字符数
            status: true, //是否开启字数提示
            statusClass: 'tip', //提示框的样式
            notificationClass: 'notification', //超出限制时文本框的样式
            showAlert: false, //超出限制时是否弹出提示框
            alertText: '最多只能输入20个字符', //超出限制时弹出框的提示文字
            slider:true //提示幻灯效果
          }
      );
    });
  </script>

css:

 1 <style type="text/css">
 2     .notification
 3     {
 4       border: 3px solid #D55B5B;
 5       background-color: #FFCDCD;
 6       padding: 5px;
 7     }
 8     .tip
 9     {
10       color: #00A8C6;
11       padding-left:2px;
12     }
13   </style>

（三）html:

1 <div class="textarea_con">
2             <textarea class="con_text"></textarea>
3             <p class="left_words">您还可以输入<span class="left_words_num">150</span>个字</p>
4             <span class="icons-s icon-tip form-error"></span>
5           </div>

css:

1 .con_text{width: 500px;height: 145px;padding: 10px;color : #555;font-size: 14px;line-height: 20px;border: 1px solid #ccc;resize: none;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;}
2 .textarea_con{position: relative;}
3 .textarea_con .form-error{left: 83px;}
4 .left_words{position: absolute;bottom:20px;right: 60px;color: #d1d1d1;line-height: 1;}

js：

/* 计算剩余字 */
  var total = 150;
  $('.con_text').on('change keydown keyup',function(){
    var input_val = $(this).val();
    var cur_length = input_val.length;
    if (cur_length >total)
  //如果元素区字符数大于最大字符数，按照最大字符数截断；
      $(this).val(input_val.substring(0, total));
  else
    $('.left_words_num').text(total - cur_length);
  });