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

做了个限制文本框最大输入长度的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;
}

 

 

 

posted @   McKay  阅读(3184)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
点击右上角即可分享
微信分享提示
AI IDE Trae