由于限制字数是用原有的 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:

 <style type="text/css">

     .notification

     {

       border: 3px solid #D55B5B;

       background-color: #FFCDCD;

       padding: 5px;

     }

     .tip

     {

       color: #00A8C6;

       padding-left:2px;

     }

   </style>

（三）html:

 <div class="textarea_con">

             <textarea class="con_text"></textarea>

             <p class="left_words">您还可以输入<span class="left_words_num">150</span>个字</p>

             <span class="icons-s icon-tip form-error"></span>

           </div>

css:

 .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;}

 .textarea_con{position: relative;}

 .textarea_con .form-error{left: 83px;}

 .left_words{position: absolute;bottom:20px;right: 60px;color: #d1d1d1;line-height:;}

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的实现的更多相关文章

  1. div实现自适应高度的textarea，实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...

  2. JQuery 复制粘贴上传图片插件（textarea 和 tinyMCE）

    开源地址:https://github.com/yuezhongxin/paste-upload-image.js 支持 Ctrl+C/Ctrl+V 上传,支持拖拽上传,也支持 QQ/微信截图上传. ...

  3. div仿textarea使高度自适应

    今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法…… <d ...

  4. 使用JQuery统计input和textarea文字输入数量代码

    本文主要介绍了jQuery实现统计输入文字个数的方法,需要的朋友可以参考下. HTML部分: <input type="text" value="我是输入的文字&q ...

  5. 取消chrome浏览器下input和textarea的默认样式；html5默认input内容清除“×”按钮去除办法

    取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...

  6. textarea 中的 innerHTML 和 value

    <textarea></textarea> <input type="button" value="click" /> &l ...

  7. textarea元素只设置高可变，宽固定

    网上查了一下多数只告诉怎么禁止拖动,好在编辑器提示了所有的属性,在此记录一下 textarea{ resize: vertical; } 还有其它的属性

  8. 让textarea完全显示文章并且不滚动、不可拖拽、不可编辑

    textarea { width: 100%; border: none; outline: none; resize: none; overflow: hidden; padding-bottom: ...

  9. 限制textarea的字数（包括复制粘贴）

    <textarea cols="100%" rows="10" id="tuconent" placeholder="评价( ...

  10. <input>和<textarea>

    作为一个刚刚涉足PHP开发的菜鸟,第一次使用博客.在这里分享一些经验给和需要的朋友,互相探讨.共同学习,希望对你有所帮助. 废话不多说,下面进入正题. 应该有朋友和我一样,需要用到文本框,要求它会自动 ...

随机推荐

  1. MongoVue 破解治标不治本

    MongoVue  破解治标不治本 ---------解决燃眉之急 注册表中查找B1159E65-821C3-21C5-CE21-34A484D54444中的子项4FF78130 ,删除其下的三个子项 ...

  2. C# 继承（4）

    接上章: class NameList { public NameList() => Console.WriteLine("这个是NameList的构造函数"); publi ...

  3. Mybatis 延迟加载策略

    延迟加载: 就是在需要用到数据时才进行加载,不需要用到数据时就不加载数据.延迟加载也称懒加载. 好处: 先从单表查询,需要时再从关联表去关联查询,大大提高数据库性能,因为查询单表要比关联查询多张表速 ...

  4. 洛谷P4559 [JSOI2018]列队（主席树）

    题面 传送门 题解 首先考虑一个贪心,我们把所有的人按\(a_i\)排个序,那么排序后的第一个人到\(k\),第二个人到\(k+1\),...,第\(i\)个人到\(k+i-1\),易证这样一定是最优 ...

  5. opencv学习笔记3——图像缩放，翻转和阈值分割

    #图像的缩放操作 #cv.resize(src,dsize,dst=None,,fx=None,fy=None,interpolation=None) #src->原图像,dsize->目 ...

  6. 控制台解析命行C#

    //---------------------------------------------------------------------   /// <summary> /// Co ...

  7. css3中的display：-webkit-box的用法

    一. css weui-media-box__desc { color: #999999; font-size: 13px; line-height: 1.2; overflow: hidden; t ...

  8. 如何让ie8地址栏下拉框里不显示历史记录和收藏夹

    打开浏览器,点击IE浏览器上方工具——Internet选项——内容——自动完成的设置——地址栏里面的勾勾去掉,浏览历史记录和收藏夹里面的东西就自动没有了

  9. SSM整合dubbo 进行分页查询

    1.先书写Mapper和sql语句 public interface ActEntityMapper { int deleteByPrimaryKey(String actId); int inser ...

  10. C++ Timer

    Timer机制 这里所说的Timer机制是定时器(Timer),例如在Javascript中就提供定时执行代码的功能.但是在C++标准中暂时没有实现这一功能的函数. Javascript中的Timer ...