Question

我在我的表单的textarea中添加了一个单词计数器......就像这样......

<div>
  <label>About you:</label>
  <textarea id="qualification" class="textarea hint_needed" rows="4" cols="30" ></textarea>                     
  <span class="hint">explain about you</span>
  <script type="text/javascript">
    $("textarea").textareaCounter();
  </script>
</div>

我的问题是当我添加textaracounter（）时，我的验证提示不起作用..当我卸载计数器功能验证提示正在工作...

这是提示消息的jquery ..

$(".hint").css({ "display":"none" });
$("input.hint_needed, select.hint_needed, textarea.hint_needed, radio.hint_needed").on("mouseenter", function() {
$(this).next(".hint").css({ "display":"inline" });
}).on("mouseleave", function() {
$(this).next(".hint").css({ "display":"none" });
});

这是单词counter ..

(function($){
    $.fn.textareaCounter = function(options) {
        // setting the defaults
        // $("textarea").textareaCounter({ limit: 100 });
        var defaults = {
            limit: 150
        };  
        var options = $.extend(defaults, options);

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

            obj = $("#experience");
            obj.after('<span style="font-weight: bold; color:#6a6a6a; clear: both; margin: 3px 0 0 150px; float: left; overflow: hidden;" id="counter-text">Max. '+options.limit+' words</span>');

            obj.keyup(function() {
                text = obj.val();
                if(text === "") {
                    wordcount = 0;
                } else {
                    wordcount = $.trim(text).split(" ").length;
                }
                if(wordcount > options.limit) {
                    $("#counter-text").html('<span style="color: #DD0000;">0 words left</span>');
                    limited = $.trim(text).split(" ", options.limit);
                    limited = limited.join(" ");
                    $(this).val(limited);
                } else {
                    $("#counter-text").html((options.limit - wordcount)+' words left');
                } 
            });
        });
    };
})(jQuery);

谁能告诉我那里有什么问题？

谢谢..

Answer 1

我会评论代码：

(function($) {
    var defaults = {
        limit: 150
    };

    $.fn.textareaCounter = function(options) {
        // setting the defaults
        // $("textarea").textareaCounter({ limit: 100 });
        var options = $.extend(defaults, options);

        // and the plugin begins
        return this.each(function() {
            var obj, text, wordcount, limited, counter_text;
            //TEXTAREA, current one
            obj = $(this);
            //setup counter text only once, do not recreate it
            if (counter_text === undefined) {
                //better to set class here, but will work
                counter_text=$('<span style="font-weight: bold; color:#6a6a6a; clear: both; margin: 3px 0 0 150px; float: left; overflow: hidden;" id="counter-text">');
                obj.after(counter_text);
            }
            counter_text.text('Max. ' + options.limit + ' words');
            //for better handling of paste you can refer to my other answer: http://tinyurl.com/bvtjoa7
            obj.bind('keyup input',function(e) {
                text = obj.val();
                if (text === "") {
                    wordcount = 0;
                } else {
                    wordcount = $.trim(text).split(" ").length;
                }
                //I added the code here to check for space key, for better usability
                if (wordcount > options.limit || (wordcount==options.limit && e.keyCode == 32 )) {
                    counter_text.html('<span style="color: #DD0000;">0 words left</span>');
                    limited = $.trim(text).split(" ", options.limit);
                    limited = limited.join(" ");
                    $(this).val(limited);
                    return false;
                } else {
                    counter_text.html((options.limit - wordcount) + ' words left');
                }
            });
        });
    };
})(jQuery);

//HINT
$(".hint").css({
    "display": "none"
});

$("input,textarea,select").filter('.hint_needed').on("mouseenter", function() {
    $(this).nextAll(".hint").css({
        "display": "inline"
    });
}).on("mouseleave", function() {
    $(this).nextAll(".hint").css({
        "display": "none"
    });
});  
//END OF HINT

//run with limit of 3 words
$("textarea").textareaCount({
  limit: 3
});

DEMO

Answer 2

http://jsfiddle.net/QD3Hn/14/ // without improvements

(function($){
    $.fn.textareaCounter = function(options) {
        // setting the defaults
        // $("textarea").textareaCounter({ limit: 100 });
        var defaults = {
            limit: 150
        };  
        var options = $.extend(defaults, options);

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

            obj = $(this);
            obj.next(".hint").after('<span style="font-weight: bold; color:#6a6a6a; clear: both; margin: 3px 0 0 150px; float: left; overflow: hidden;" id="counter-text">Max. '+options.limit+' words</span>');

            obj.on("keyup keydown", function() {
                text = obj.val();
                if(text === "") {
                    wordcount = 0;
                } else {
                    wordcount = obj.val().split(" ").length;
                }
                if(wordcount == options.limit) {
                    obj.next(".hint").next("#counter-text").html('<span style="color: #DD0000;">0 words left</span>');
                    limited = $.trim(text).split(" ", options.limit);
                    limited = limited.join(" ");
                    $(this).val(limited);
                } else {
                    obj.next(".hint").next("#counter-text").html((options.limit - wordcount)+' words left');
                } 
            });
        });
    };
})(jQuery);
$(document).ready( function() {
    $(".hint").css({ "display":"none" });
    $("input.hint_needed, select.hint_needed, textarea.hint_needed, radio.hint_needed").on("mouseenter", function() {
    $(this).next(".hint").css({ "display":"inline" });
    }).on("mouseleave", function() {
    $(this).next(".hint").css({ "display":"none" });
    });
        $("textarea").textareaCounter();
    });

Answer 3

主要问题是你的textarea插件添加了一个元素after textarea。这意味着next()中的mousenter不是您期望的hint类，因为新添加了跨度。

next()寻找下一个直接兄弟姐妹......现在是textAreaCounter span

如果要将textArea包装在另一个元素（如span）中，可以将提示代码更改为：

$(".hint_needed").on("mouseenter mouseleave", function() {
    var $this=$(this), $next= $this.is('textarea') ? $this.parent().next() : $this.next();

    $next.toggle();
});

DEMO：http://jsfiddle.net/QD3Hn/12/

工作验证提示，工作字计数器但不能一起工作

3 个答案: