jQuery插件的字符计数 [英] jquery plugin for character count

查看:53
本文介绍了jQuery插件的字符计数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

根据Felix提供的代码,我为字符计数脚本制作了一个html页面.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
    (function($) {
        $.fn.charlimit = function(options) {
            var def = {
            limit: 250,
                display: null
            };
            $.extend(def, options);
            var $display = $(def.display);

            $display.html(def.limit);

            this.bind('change keyup', function() {
                var l = $(this).val().length;
                $display.html(def.limit - l);
                if (l > def.limit) {
                    $(this).val(function(i, value) {
                        return value.substring(0, def.limit);
                    });
                    $display.html(def.limit - $(this).val().length);
                }
            });
            return this;
        };
    }(jQuery));


        //Plugin Call
        $('#message').charlimit({
            limit: 10,
            display: '#charCount'
        });
    });
</script>
</head>

<body>
    <textarea name="message" id="message" tabindex="4" rows="4" cols="35"></textarea>
    <p class="character_limit">Character limit: <span id="charCount"></span></p>
</body>
</html>

我面临的问题是...当字符数变为0并按另一个键时.charcount将显示-60,并且函数(i,value){.....}进入文本区域.

请检查.

谢谢 洛克希·亚达夫(Lokesh Yadav)

解决方案

函数声明中似乎存在一个小的语法错误.

函数声明的最后一行是:

        };
    }(jQuery));

但应该是:

        };
    })(jQuery);

编辑:虽然我没有在Firefox中看到错误,但它似乎可以正常运行,所以这可能不是罪魁祸首.

as per code provide by Felix, i have made a html page for the character count script.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
    (function($) {
        $.fn.charlimit = function(options) {
            var def = {
            limit: 250,
                display: null
            };
            $.extend(def, options);
            var $display = $(def.display);

            $display.html(def.limit);

            this.bind('change keyup', function() {
                var l = $(this).val().length;
                $display.html(def.limit - l);
                if (l > def.limit) {
                    $(this).val(function(i, value) {
                        return value.substring(0, def.limit);
                    });
                    $display.html(def.limit - $(this).val().length);
                }
            });
            return this;
        };
    }(jQuery));


        //Plugin Call
        $('#message').charlimit({
            limit: 10,
            display: '#charCount'
        });
    });
</script>
</head>

<body>
    <textarea name="message" id="message" tabindex="4" rows="4" cols="35"></textarea>
    <p class="character_limit">Character limit: <span id="charCount"></span></p>
</body>
</html>

The problem i am facing is... when the character count becomes 0 and i press another key.. charcount will show -60 and the function(i, value) { ..... } gets inside the textarea.

Please check.

Thanks LOkesh Yadav

解决方案

There seems to be a small syntax inaccuracy in there with the function declaration.. weird that this works, but maybe it's normal...

The last line of the function declaration is:

        };
    }(jQuery));

But should be:

        };
    })(jQuery);

edit: I didn't get an error in Firefox though, and it seemed to work fine, so this is probably not the culprit.

这篇关于jQuery插件的字符计数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆