<!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. SpringBoot(九)：多模块下mapper分散后无法启动SpringBoot解决方法

    问题描述: SpringBoot项目之前是一个项目*-web,运行没问题,后来将项目拆分为多个项目,就出现启动失败问题. SpringBoot项目结构: 项目被分为多块:*-mapper(mybati ...

  2. C++ delegate的几种方法

    https://stackoverflow.com/questions/9568150/what-is-a-c-delegate You have an incredible number of ch ...

  3. [JS]常见JS错误之一：Uncaught SyntaxError: Unexpected identifier

    在编写JS时如果创建变量没有用var而是使用了变量的类型,如: MyClass c=new MyClass(); 这样的错误Java程序员容易犯,也许不经意就写出来了,然后chrome的开发者工具里会 ...

  4. grid - 使用相同的名称命名网格线和设置网格项目位置

    1.使用repeat()函数可以给网格线分配相同的名称.这可以节省一定的时间 使用repeat()函数可以给网格线命名,这也导致多个网格线具有相同的网格线名称. 相同网格线名称指定网格线的位置和名称, ...

  5. class<T>和 class<?>类型

    ? 表示不确定的java类型. T 表示java类型 Class<T>在实例化的时候,T要替换成具体类Class<?>它是个通配泛型,?可以代表任何类型<? extend ...

  6. Android Studio打包过程和应用安装过程

    三个部分,检查项目和读取基本配置,Gradle Build,Apk Install和LaunchActivity. 应用安装到手机,会复制APK安装包到data/app目录下,解压并扫描安装包,把de ...

  7. notepad++ 复制代码--高亮 - 带颜色

    思路来源:http://blog.csdn.net/super828/article/details/72826024 选择代码,然后右键选择菜单命令

  8. thymeleaf th:href 多个参数传递格式

    今天在使用thymeleaf的th:href传递多个参数的时候困惑了.然后百度了一下,发现没有人注释说明怎么弄,然后自己google了一下,现在就标记一下,方便记录一下. th:href=" ...

  9. repo命令详解

    Android 为企业提供一个新的市场,无论大企业,小企业都是处于同一个起跑线上.研究 Android 尤其是 Android 系统核心或者是驱动的开发,首先需要做的就是本地克隆建立一套 Androi ...

  10. Android CPU类型及预定义的宏

    [时间:2019-02] [状态:Open] [关键词:android,cpu, armeabi, armeabi-v7a, arm64-v8a, 32位,64位,c/c++] 本文主要总结下前段时间 ...