JQuery字符限制器,同时忽略textarea中的空格

时间:2013-10-20 20:24:26

标签: javascript jquery html

我研究了各种JQuery插件来限制用户在文本区域上键入的字符数,但我还没有找到一个忽略空格的字符。我尝试使用$('textarea').val().replace(/ /g,'').length修改带有限制器的现有字符计数器,它确实有效。但是,当代码达到限制时,我希望用户将无法再向文本区域键入任何内容。但是,它并没有真正起作用。

以下是该插件的代码:

(function ($) {
$.fn.extend({
    limiter: function (limit, elem) {
        $(this).on("keyup focus", function () {
            setCount(this, elem);
        });

        function setCount(src, elem) {
            var chars = src.value.replace(/ /g,'').length;
            if (chars > limit) {
                src.value = src.value.substr(0, limit);
                chars = limit;
            }
            elem.html(limit - chars);
        }
        setCount($(this)[0], elem);
    }
});
})(jQuery);

我认为问题在于src.value = src.value.substr(0, limit); 因为limit变量仍会将空格计为字符。作为JQuery的初学者,我不确定如何处理这个问题。

真的很感激任何帮助。提前谢谢!

这是我到目前为止的一个小提琴:http://jsfiddle.net/dxUsK/1/

这是原始插件的链接:http://www.scriptiny.com/2012/09/jquery-input-textarea-limiter/

1 个答案:

答案 0 :(得分:2)

问题在于你的正则表达式是从字符串中删除空格字符,然后在设置源值时删除了所有空格字符。一个简单的解决方法是计算空格数,然后将其包含在字符串长度中。

// Count the number of space characters.
var spaces = src.value.split(' ').length - 1; // remove 1 for index 0 later
if (chars > limit) {
    src.value = src.value.substr(0, limit + spaces); // Don't forget the spaces here!

还有其他一些方法可以做到这一点,但这是一个普遍的想法。