使用jquery计算具有单个最大值的多个文本框值中的字符

时间:2014-06-06 06:23:16

标签: javascript jquery

我想使用多个文本框计算字符数。我也搜索了很多链接和堆栈溢出答案。但我没有得到正确的答案。我已经回答了以下链接的答案,但是这两个文本框有两种类型的最大计数。但在我的情况下,我想计算所有文本框的最大字符 160 。它应该结合所有这些输入,并且每次应该计算值JQuery character counter with multiple inputs

我的代码

$('#Loc').keyup(function () {

            var len = $(this).val().length;
            var $msg = $("#charNum");
            if (len > 160) {
                var output = $(this).val().substring(0, 160);
                var msglength = 2;
                //$(this).val(output);

                $msg.html(len + "/" + msglength + " sms left");
            } else {
                $msg.html(160 - len + " characters left");
            }
        });

上面的代码是第一个文本框。

 $('#Contn').keyup(function () {
            var Vaclen = $('#Vac').val().length + $('#Loc').val().length;
            var len = $(this).val().length;
            var $msg = $("#charNum");
            if (len > 160) {
                var output = $(this).val().substring(0, 160);
                var msglength = 2;
                //$(this).val(output);

                $msg.html(len + "/" + msglength + " sms left");
            } else {
                $msg.html(Vaclen - len + " characters left");
            }
        });

我附上截图。 enter image description here

如何组合所有文本框值以及如何显示?

My fiddle here

2 个答案:

答案 0 :(得分:1)

试试这个jQuery:

在这里,您需要为输入文本编写两个事件。一个是焦点,您将计算除焦点输入之外的总文本长度,另一个是焦点输入的键盘事件,您必须获得所有输入的总文本长度。

$(document).ready(function () {
            var count = 0; // 
            var focusCount = 0;

        $('input[type=textbox]').focus(function(){

            focusCount = $(this).val().length;
            count = 0;              
            // get total text length
            $('input[type=textbox]').each(function(){
                count +=  $(this).val().length;
            });
            // remove text length of focused input from total count
            count-=focusCount;
        });

        $('input[type=textbox]').keyup(function () {
                focusCount = $(this).val().length;
               $('#charNum').text(160 - (count+focusCount));
        });
    });

Working JSfiddle

答案 1 :(得分:0)

你需要计算所有元素的长度(我添加了一个限于所有输入的类):

$('.limited').each(function() {
    var curLen = $(this).val().length;
    len +=  curLen;
});

要截断结果,您需要知道该特定元素可用的剩余长度。

请参阅此示例(最大长度减少到10以进行测试):jsfiddle