• 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);
      });
  • 相关阅读:
    The hardest problem ever
    1146 Topological Order
    1147 Heaps
    Weekly Contest 184
    1148 Werewolf
    1149 Dangerous Goods Packaging
    1150 Travelling Salesman Problem
    1151 LCA in a Binary Tree (30point(s))
    1152 Google Recruitment
    美团2020春招笔试
  • 原文地址:https://www.cnblogs.com/jymz/p/4027281.html
Copyright © 2020-2023  润新知