由于限制字数是用原有的 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. 函数形参为基类数组，实参为继承类数组，下存在的问题------c++程序设计原理与实践（进阶篇）

    示例: #include<iostream> using namespace std; class A { public: int a; int b; A(int aa=1, int bb ...

  2. Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'blog.t_blog.addTime' which is not functi

    sql报错: Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Expression #1 of SELECT ...

  3. [SinGuLaRiTy] 复习模板-数据结构

    [SinGuLaRiTy-1040] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 二维线段树 2D_Segment_Tree //示例:单 ...

  4. 【重要的css属性学习】看了乙醇的文章，统计了几个高star前端框架下，Css属性出现最多的，这里学习记录一下

    color background-color display margin-left border-color padding max-width margin-bottom width flex 待 ...

  5. HDU - 5996 树上博弈 BestCoder Round #90

    就是阶梯NIM博弈,那么看层数是不是奇数的异或就行了: #include<iostream> #include<cstdio> #include<algorithm> ...

  6. \\.\Global\vmx86: 系统找不到指定的文件

    使用vmware虚拟机时出现如下的错误: vmware安装无法打开内核设备 \\.\Global\vmx86: 系统找不到指定的文件 解决办法: 新建文件,将下面的代码拷贝进去: @Echo Off ...

  7. day--39-MySQL的多表查询

    多表查询一:表的基本介绍 可以参考:https://www.cnblogs.com/cdf-opensource-007/p/6517627.html 建立一个员工表信息表和一个部门表,每个员工都对应 ...

  8. SQL Server2012如何更改服务器的名称

    Problem: sql server 2012 安装完毕后,连接数据库只能使用 机器名\数据库实例 的方式,想用 localhost 或 . 作为服务器名称不可以 Solution: 参考:http ...

  9. 报表中经常遇到的一个头疼的问题是需要自动选择过去一个月的数据作为当前报表输出。网上查询了一些.NET 的C#例子，发现都实现的比较复杂

    报表中经常遇到的一个头疼的问题是需要自动选择过去一个月的数据作为当前报表输出.网上查询了一些.NET 的C#例子,发现都实现的比较复杂,其实这个问题可以很简单的通过.NET的DateTime函数来实现 ...

  10. 坐标&接龙型动态规划 - 20181026

    109. Triangle 此题还可以用DFS,记忆化搜索去做,二刷实现 public class Solution { /** * @param triangle: a list of lists ...