做了个限制文本框最大输入长度的jquery插件，效果图(共2个文本框，限制最多10个字符)：

功能：当超出设置的最大字符长度后，会截断字符串、更改当前元素的css（会在1秒后还原css）、支持长度超出后的异常回调

使用方式：

<body>

    <textarea id="filter1" rows="5" cols="100"></textarea>

    <textarea id="filter2" rows="5" cols="100"></textarea>

    <br />

    <span id="msg"></span>

    <script language="javascript" type="text/javascript">

        $(function () {

            function processException(id) {

                $("#msg").html(id + "&nbsp;exception occurred.<br />" + $("#msg").html());

            }

            $("#filter1,#filter2").restrictFieldLength({

                maxTextLength: 10,

                restoreTime:2000,

                exceptionCallback: processException

            });

        });

    </script>

</body>

jquery.restrictFieldLength.js：

(

    function ($) {

        $.fn.restrictFieldLength = function (settings) {

            var opts = $.extend({}, $.fn.restrictFieldLength.defaultSettings, settings || {});

            return this.each(function () {

                var elem = $(this);

                elem.on("keyup", function () {

                    var s = elem.val();

                    if (s.length >= opts.maxTextLength) {

                        elem.val(s.slice(0, opts.maxTextLength));

                        elem.prop("class", opts.exceptionCss);

                        if (opts.exceptionCallback) {

                            opts.exceptionCallback(elem[0].id);

                        }

                        var normalIt = function () {

                            elem.prop("class", opts.defaultCss);

                        }

                        setTimeout(normalIt, opts.restoreTime);

                    }

                });

            });

        }

        $.fn.restrictFieldLength.defaultSettings = {

            maxTextLength: 100,

            defaultCss: "restrictFieldLength_defaultCss",

            exceptionCss: "restrictFieldLength_exceptionCss",

            restoreTime:1000,

            exceptionCallback: null

        }

    }

)(jQuery);

jquery.restrictFieldLength.css

.restrictFieldLength_defaultCss

{

    color:black;

}

.restrictFieldLength_exceptionCss

{

    color:red;

}

写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js的更多相关文章

  1. 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  2. JS和vue文本框输入改变p标签的内容测试

    文本框输入,p标签的内容自动变成文本框的内容,如下是三种方法的测试: 方法1:JS里的onchange,当文本框内容改变事件,该事件里写的方法是,获取p标签本身,然后获取文本框的值,赋值给变量,最后给 ...

  3. 监听文本框输入开发仿新浪微博限制输入字数的textarea插件

    监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...

  4. jquery正则表达式显示文本框输入范围 只能输入数字、小数、汉字、英文字母的方法

    正则表达式限制文本框只能输入数字 许多时候我们在制作表单时需要限制文本框输入内容的类型,下面我们用正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等各类代码.1.文本框只能输入数字代码(小数点 ...

  5. 【学习】文本框输入监听事件oninput

    真实项目中遇到的,需求是:一个文本框,一个按钮,当文本框输入内容时,按钮可用,当删除内容时,按钮不可用. 刚开始用的focus和blur, $(".pay-text").focus ...

  6. jQuery实现限制input框 textarea文本框输入字符数量的方法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. js入门-文本框输入特定内容控制另一个文本框

    在填写表单时,有时需要某些文本框隐藏,当一文本框输入特定内容时才会显示隐藏的文本框,这一功能可以用onchange事件或oninput事件实现.下面对比下两种方法实现的区别: onchange()定义 ...

  8. 转：zTree树控件扩展篇：巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

    是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...

  9. 监听文本框输入oninput和onpropertychange事件

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...

随机推荐

  1. day15（PYTHON）推导式{生成器，字典，列表，集合}

    #[每一个元素或者是和元素相关的操作 for 元素 in 可迭代数据类型] #遍历之后挨个处理 #[满足条件的元素相关的操作 for 元素 in 可迭代数据类型 if 元素相关的条件] #筛选功能 # ...

  2. MySQL索引扩展(Index Extensions)学习总结

    MySQL InnoDB的二级索引(Secondary Index)会自动补齐主键,将主键列追加到二级索引列后面.详细一点来说,InnoDB的二级索引(Secondary Index)除了存储索引列k ...

  3. JAVA多线程的问题以及处理（一）【转】

    多线程编程为程序开发带来了很多的方便,但是也带来了一些问题,这些问题是在程序开发过程中必须进行处理的问题. 这些问题的核心是,如果多个线程同时访问一个资源,例如变量.文件等,时如何保证访问安全的问题. ...

  4. NoSQL与MongoDB介绍

    写在前面 本文是由一次演讲整理出来的,文中大部分资料来源于网络,感谢Wikipedia,Google和MongoDB官网.文中使用的MongoDB版本为1.2.4. What is NoSQL NoS ...

  5. 当年写的如何成为一名MSSQL DBA

    很多开发人员都想成为一名数据库培训,也有很多人一开始就把自己定位成为一名DBA,DBA究竟需要掌握些什么知识和技能呢?以下是我        做DBA工作和面试DBA时,整理的一些DBA方面的三十个问 ...

  6. Java入门（四）：运算符优先级、关键字与保留字

    上次介绍了Java的运算符,今天来介绍下运算符的优先级,以及Java的关键字.保留字. 一.运算符优先级 序号 运算符 名称 目数 结合性 说明 1 [ ] 方括号 从左向右 优先级最高 . 点号 双 ...

  7. 浅谈javascript的Touch事件

    js的touch事件,一般用于移动端的触屏滑动 代码如下: $(function(){ document.addEventListener("touchmove", _touch, ...

  8. Java 8 新特性:2-消费者（Consumer）接口

    (原) 在上一篇,用到过这样一个方法: list.forEach(new Consumer<Integer>() { @Override public void accept(Intege ...

  9. html面页与JAVA通过webSocket 通讯

    (原) 往常前后端通讯基本都是以ajax请求或是表单做数据交互的,这是一种无状态的http协议,如果要做tcp协议的数据交互,能想到的技术也就socket了,可如果后端是JAVA,前端如何做socke ...

  10. 虚拟化技术QEMU-KVM入门

    一.QEMU.KVM.QEMU-KVM QEMU提供一系列的硬件模拟设备(CPU,网卡,磁盘等),客户机指令都需要QEMU翻译,因而性能较差.KVM是linux内核提供的虚拟化,可以用来进行vCPU的 ...