<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery实现限制input框  textarea文本框输入字符数量的方法</title>

</head>

<script src="http://j2.58cdn.com.cn/js/jquery-1.8.3.js"></script><!--依赖jquery-->

<body>

用户名:<input type="text" name="username" id="username" >

<span style="display:none;border:0;float:right;margin-right:50px" id="t2" >用户名长度为3-6位</span>

<!--我微信号 (WX-APP-PC) -->

<script>

(function($) {

  $.fn.extend( {

    limiter: function(limit, elem) {

      $(this).on("keyup focus", function() {

        setCount(this, elem);

      });

      function setCount(src, elem) {

        var chars = src.value.length;

        if (chars > limit) {

          src.value = src.value.substr(0, limit);

          chars = limit;

          $('#t2').show();

        }else{

            $('#t2').hide();

        }

        elem.html( limit - chars );

      }

      setCount($(this)[0], elem);

    }

  });

})(jQuery);

//To setup the limiter, simply include a call similar to the one below:

var elem = $("#username");

$("#username").limiter(6, elem);

</script>

</body>

</html>

jQuery实现限制input框 textarea文本框输入字符数量的方法的更多相关文章

  1. Jquery实现 TextArea 文本框根据输入内容自动适应高度

    原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...

  2. 如何限制textarea文本框的输入字数

    代码实例如下: <!doctype html><html><head><meta charset="UTF-8"><title ...

  3. 【kindeditor】KindEditor获取多个textarea文本框的值并判断非空

    kindeditor官网:http://kindeditor.net/demo.php 如何获取多个KindEditor中textarea文本框的值,方式很多种(带有HTML标签). var intr ...

  4. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

  5. IE input X 去掉文本框的叉叉和password输入框的眼睛图标

    IE input X 去掉文本框的叉叉和password输入框的眼睛图标 从IE 10開始,type="text" 的 input 在用户输入内容后.会自己主动产生一个小叉叉(X) ...

  6. 限制textarea 文本框的长度(收集了几个办法)

    文章参考地址:http://blog.csdn.net/nhconch/article/details/4223076 需求背景: 前几天,因为客户有一个需求说,需要对一个评论(一个textarea文 ...

  7. textarea中限制输入字符长度

    要在textarea中限制输入字符的长度,比如在twitter中要限制字符为140个,可实现的方法有: 1. <textarea name="A" cols="45 ...

  8. jquery禁用form表单中的文本框

    //禁用form表单中所有的input[文本框.复选框.单选框],select[下拉选],多行文本框[textarea] function disableForm(formId, isDisabled ...

  9. jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...

随机推荐

  1. codeforces 13EE. Holes(分块&amp;动态树)

    E. Holes time limit per test 1 second memory limit per test 64 megabytes input standard input output ...

  2. ionic 状态栏显示异常 statusBar

    从主分支上新建一个分支开发另一个app, 生成之后手机上显示状态栏异常, 如下图, 只显示了电池的色块, 百思不得其解啊. 各种猜测无果, 对比config.xml, 发现statusBar插件版本不 ...

  3. 招中高级web开发工程师

    >>招中高级web开发工程师

  4. 分析轮子（八）- List.java 各种遍历方式及遍历时移除元素的方法

    注:玩的是JDK1.7版本 1:先尝栗子,再分析,代码简单,注释清晰,可自玩一下 /** * @description:测试集合遍历和移除元素的方式 * @author:godtrue * @crea ...

  5. STM32F105 PA9/OTG_FS_VBUS Issues

    https://www.cnblogs.com/shangdawei/p/3264724.html F105 DFU模式下PA9引脚用来检测USB线缆,若电平在2.7~5v则认为插入usb设备(检测到 ...

  6. python和C++联合调试

    python可以利用SO的方式去调用C++中的函数,但是需要一种调试方案来进行python和C++的联合调试,效果是直接在c++代码中打断点,然后python在进行c++so调用的时候,直接进入到断点 ...

  7. 转：slf4j-api、slf4j-log4j12、log4j之间关系

    原文:https://www.cnblogs.com/lujiango/p/8573411.html 1. slf4j-api slf4j:Simple Logging Facade for Java ...

  8. XML格式化工具

    做接口开发的时候,往往接受参数或返回值是一个XML的字符串.如下图,不方便辨识 两种方法, 1.将它保存为xxx.xml,然后用浏览器打开.这种方法稍微有些麻烦. 2.使用 UltraEdit 工具

  9. sql 时间转换格式 convert(varchar(10),字段名,转换格式)

    convert(varchar(10),字段名,转换格式) CONVERT(nvarchar(10),count_time,121) CONVERT为日期转换函数,一般就是在时间类型(datetime ...

  10. JDK中Unsafe类详解

    Java中Unsafe类详解 在openjdk8下看Unsafe源码 浅析Java中的原子操作 Java并发编程之LockSupport http://hg.openjdk.java.net/jdk7 ...