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

    或.无属性.属性个数.属性值: var preceding_siblings = node.SelectNodes("preceding-sibling::input| preceding- ...

  2. 数据库抽象层 pdo

    一 . PDO的连接 $host = "localhost"; $dbname = "hejuntest"; $username = "root&qu ...

  3. RadASM的测试工程！

    RadASM已经安装完毕了,是否可以正常工作了呢?我们通过创建一个工程来测试一下,下面就是创建这个测试工程的过程: 1, 2, 3, 4, 5, 6, 7, 8, 9, 至此,我们通过RadASM的模 ...

  4. Linux常用命令--用户管理，文件权限，打包命令等

    幕布链接 Linux常用命令--用户管理,文件权限,打包命令等

  5. centos7多节点部署redis4.0.11集群

    1.服务器集群服务器 redis节点node-i(192.168.0.168) 7001,7002node-ii(192.168.0.169) 7003,7004node-iii(192.168.0. ...

  6. 2. C语言文件操作经典习题

    1. 统计英文文本文件中,有多少个大写字母.小写字母.数字.空格.换行以及其他字符. #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> ...

  7. centos6.7安装tomcat

    一.配置环境 安装环境: centos6.7   jdk1.8.0   tomcat8.5 1.到官网下载tomcat 二.下载安装tomcat 1.通过xsheel工具rz命令上传tomcat安装包 ...

  8. C#直接使用DllImport外部Dll的方法

    C#.Net调用基本格式:[DLLImport(“DLL文件路径”)]修饰符 extern 返回值类型 方法名称(参数列表) 如: [DllImport("kernel32.dll" ...

  9. Qt 学习之路 2（56）：使用模型操作数据库

    Qt 学习之路 2(56):使用模型操作数据库 (okgogo: skip) 豆子 2013年6月20日 Qt 学习之路 2 13条评论 前一章我们使用 SQL 语句完成了对数据库的常规操作,包括简单 ...

  10. fork 炸弹

    一段古老的Linux shell程序 :() { :|:& };: 这是bash shell的写法,首先定义了一个函数:(),花括号里面是函数体,这里递归执行函数本身,通过管道在后台再递归运行 ...