由于限制字数是用原有的 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. Day 3 Python 基础数据类型二

    1. INT 型 #1. 数字int #bit_length() 当十进制用二进制表示时,最少使用的位数. v =11 data = v.bit_length() print(data) 2. 布尔值 ...

  2. ecliplse的下载安装

    ecliplse的官方下载地址是: https://www.eclipse.org/downloads/packages/ 进去的速度可能比较慢,请耐心等待,进去之后的页面如下,为了便于理解下面的是我 ...

  3. ajax-3验证

    $("#formBtn").click(function () { // var regName =/^[\u4e00-\u9fa5]{2,10}$/;//姓名只能是汉字切2-10 ...

  4. 【arc074e】RGB Sequence dp

    Description ​ 丰泽爷今天也在愉快地玩Minecraft! ​ 现在丰泽爷有一块1∗N1∗N的空地,每个格子按照顺序标记为11到NN.丰泽爷想要在这块空地上铺上红石块.绿宝石块和钻石块作为 ...

  5. HDU6308-2018ACM暑假多校联合训练1011-Time Zone

    题目大意就是给你UTC-8时区的时间 让你求对应时区的时间 哇 这个题 看似简单,但是一开始怎么都过不了啊 同学用自己写的read过了,后来看了一下各位大佬说改成分钟随便过,就随便过了 Problem ...

  6. SpringMVC返回JSON数据

    1.导入json的jar包2.在Controller类中添加 //查看用户信息 ?json //params="json"的意思是访问view这个方法的时候,必须有一个参数json ...

  7. setinterval 里面的方法记得加引号

    setinterval 里面的方法记得加引号 否则不执行

  8. 4A - Horse

    打表找规律 #include <iostream> #include <queue> using namespace std; ][]; ]{, , , , -, -, -, ...

  9. phpmyadmin更改用户名和密码

    我是用的xampp集成环境,wampp也差不多.另外没有配图,希望读者可以在实践的过程中有所思考,本文的主旨就是:找一个不叫root但和root一样厉害的人来管理数据库. 1,做个准备 首先创建一个和 ...

  10. shell-004：检测机器存活或者网络陡动情况！

    如下图情况,我们监测的就是此数据,当大于50%了,我们就可以设置告警等! #!/bin/bash # 用ping检测一台机器的存活或者网络波动情况 # 检测机器的丢包率来检测网络波动情况!! n=`p ...