<!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. settings设置中文admin

    所以更改setttings.py 下 LANGUAGE_CODE = 'zh-Hans'即可

  2. iOS Xcode 10: Multiple commands produce

    Xcode自动升级到10.0 1.编译的时候报错:Multiple commands produce 解决办法:File -> Workspace Setting -> build sys ...

  3. 西山居首页jQuery焦点图代码

    西山居首页jQuery焦点图代码是一款带文字描述,左右箭头,索引按钮,自动轮播切换的jQuery特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style ...

  4. ios vue2.0使用html5中的audio标签不能播放音乐

    我写了一个M端播放音乐的组件,使用html5的audio标签 然后我使用watch监测currentSong 在浏览器中看到audio渲染的如下: 单独访问渲染出来的audio中url可以播放音乐,为 ...

  5. 微信小程序——购物车结算

    项目需要做个购物车结算功能,先分析需求: 1.全选,反选的功能.当选中的个数 = 购物车的数量时,勾选全选按钮,反之则取消选中全选按钮: 2.改变选中状态时,计算总价和总数量: 3.单个产品的数量加减 ...

  6. JSP通过AJAX获取服务端的时间，在页面上自动更新

    1.在页面上引入js <head> <meta http-equiv="Content-Type" content="text/html; charse ...

  7. PHP读取文本文件（TXT）

    <? header("content-type:text/html;charset=utf-8"); $file = "demo.txt"; ###判断该 ...

  8. [转]springboot2 webflux 响应式编程学习路径

    原文链接 spring官方文档 springboot2 已经发布,其中最亮眼的非webflux响应式编程莫属了!响应式的weblfux可以支持高吞吐量,意味着使用相同的资源可以处理更加多的请求,毫无疑 ...

  9. PXE：偷梁换柱，成功 启动 centos live

    default menu.c32 timeout 1 ### 偷梁换柱,成功 label centos76-live menu label centos76-live from ftp kernel ...

  10. 目前（2018年）在北京java程序员平均薪水是多少呢？

    1. 这个要看看个人java开发能力,你那个自己带项目做团队的比较高哦 2. 一般来说刚毕业的本科实习生大约在5000左右,干半年基本都张到7.5左右了. 3. Java程序员一般都集中在北京,上海和 ...