由于限制字数是用原有的 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++后台实习招聘麽

    有大佬拉我一把麽,现在广州还有c++后台实习招聘麽

  2. 多线程《四》Thread对象的其他属性和方法

    Thread对象的其他属性或方法 介绍 Thread实例对象的方法 # isAlive(): 返回线程是否活动的. # getName(): 返回线程名. # setName(): 设置线程名. th ...

  3. C# Winform下一个热插拔的MIS/MRP/ERP框架（通用控件）

    一直对商业控件不感冒, 结合日常工作, 我写了几个常用控件. 一.下拉框控件(仿Access下拉框:F4下拉,自动输入,支持单/多列显示),可在Datagridview中使用. 1.常规: 2.Dat ...

  4. P2561 [AHOI2002]黑白瓷砖

    $ \color{#0066ff}{ 题目描述 }$ \(\color{#0066ff}{输入格式}\) 文件中以一行的形式存放一个正整数 n , n ≤ 20 . \(\color{#0066ff} ...

  5. SDUT OJ 数据结构实验之链表六：有序链表的建立

    数据结构实验之链表六:有序链表的建立 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Desc ...

  6. php代码书写习惯优化小结

    (1)使用 static 静态方法比普通方法快4倍(2)echo输出快于print(3)连接字符使用 , 代替 .(4)循环之前先取出最大值,而不是在循环里面取值    正确的方法      $max ...

  7. django中给ajax提交加上csrf

    代码来自djangoproject网站 在html中的script标签下插入下面代码 在html文档加载时候运行下面代码,并且使用$.ajaxSetup设置ajax每次调用时候传入的数据,$.ajax ...

  8. SDK 开发 .a .framework .bundle (xcode引用) 依赖sdk工程

    一. 静态库.a 1.创建静态库工程 Cocoa Touch Static Libray  ,然后可以创建一个测试视图 TestView 2.暴露头文件 -> Build Phases--> ...

  9. @staticmethod 和@classmethod区别

    python中@classmethod @staticmethod区别 Python中3种方式定义类方法, 常规方式, @classmethod修饰方式, @staticmethod修饰方式. cla ...

  10. Android WebView的使用(用来显示网页)

    1.WebView介绍 2.URL介绍 简单说就是网址. 3.java后台代码 package com.lucky.test34webview; import android.support.v7.a ...