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);

  });

 

你可能感兴趣的:(textarea)