2013-02-13 29 views
1

我们有一个非常简单的字数计数器,可以满足我们的需求。我们现在需要对其进行修改。请参阅我们的jsfiddle在http://jsfiddle.net/MUSXU/1如果所有字符计数器都不正确,请禁用提交按钮

(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. 我们需要提交按钮保持禁用如果有任何页面上的字符计数器都超过自己的极限。现在,按照我们编写代码的方式,当单词计数结束时,提交按钮将被成功禁用,但只要您键入下一个文本区域,它就会立即重新启用。

我对JavaScript并不是很了解,并且只是为了满足我们的需求而对它们进行了黑客攻击,这是我们部署之前需要处理的最后一件事。

我很感激任何帮助,你可以借。

回答

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); 
+0

很好,谢谢!我知道这是我们需要做的,但我不知道如何实现它。 虽然当我点击链接时,我确实意识到了另一个小问题 - 如果textareas已经包含内容,则计数器不会反映页面载入中的内容。我们该如何纠正? 再次感谢! – Kevin 2013-02-13 18:24:50

+0

当然,看看添加到最后的位。我更新了小提琴链接。 – jmorc 2013-02-13 18:39:42

+0

你太棒了。感谢教我如何做到这一点! – Kevin 2013-02-13 18:53:21

相关问题