如果所有字符计数器都不正常,请禁用提交按钮

时间:2013-02-13 17:20:17

标签: jquery

我们有一个非常简单的单词计数器,可以满足我们的需求。我们现在需要对它进行修改。请在http://jsfiddle.net/MUSXU/1

上查看我们的JSfiddle
(function($){
    $.fn.textareaCounter = function(options) {
        // setting the defaults
        // $("textarea").textareaCounter({ limit: 100 });
        var defaults = {
            limit: 100
        };  
        var options = $.extend(defaults, options);

        // and the plugin begins
        return this.each(function() {
            var obj, text, wordcount, limited;

            obj = $(this);
            obj.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" id="counter-text">Max. '+options.limit+' words</span>');

            obj.keyup(function() {
                text = obj.val().replace(/\s+/g, " ");;
                if(text === "") {
                    wordcount = 0;
                } else {
                    wordcount = $.trim(text).split(" ").length;
                    var URLs = text.match(/([^\s])+\.(com|net|org|biz|gov|edu|mobi|info|ca|us|mil)/g);
                    if(URLs != null && URLs.length > 0){
                      wordcount += (URLs.length*2);
                    }
                }
                if(wordcount > options.limit) {
                   obj.next().html('<span style="color: #DD0000;">-' + parseInt(wordcount - options.limit, 10) + ' words left</span>');

                    $("#submit").prop('disabled', true);
                } else {
                    obj.next().html((options.limit - wordcount)+' words left');
                $("#submit").prop('disabled', false);
                } 
            });
        });
    };
})(jQuery);
$('textarea').textareaCounter({limit:15});

我们有一个问题:

  1. 如果页面上的任何字符计数器超出限制,我们需要提交按钮保持禁用状态。现在,我们对它进行编码的方式,当字数超过时,提交按钮被成功禁用,但只要您输入下一个文本区域,它就会立即重新启用。
  2. 我在javascript上的表现并不是很好,并且只是为了我们的需要而将它们整合在一起,这是我需要工作的最后一件事,然后才能部署它。

    我很感激您可以提供任何帮助。

1 个答案:

答案 0 :(得分:2)

您可以使用数组来保存结果以检查验证。看到这个......

http://jsfiddle.net/kmd97/Up9KS/

var res = [];

 $("#submit").prop('disabled', false);
                    $.each(res, function (index, value) {
                        if (value) {
                            $("#submit").prop('disabled', true);
                            return false;
                        }

添加这个位onload来模仿一个按键,可能是最简洁/最简单的方法来预先实现验证。

var press = jQuery.Event("keyup");
press.ctrlKey = false;
press.which = 40;
$("textarea").trigger(press);