hiI have two textboxs in page that I want use character count for them1Txtmatn2Txtmatn1I use below code for one of themTxtmatnltscript type34textjavascript34gt function var i 0 39idTxtmatn39keydownfunction e var ctrlKey 67 vKey 86 if ekeyCode ctrlKey ampamp ekeyCode vKey 39idhfCharacterCount39valthisvallength 39idLbltedaCh39

Hi nedashRefer below codelthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltstyle type34textcss34gt left float left width 20 overflow hidden right float left width 20 overflow hidden ltstylegt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgt ltscript type34textjavascript34gt function For 1st Textbox var i 0 39idTxtmatn39keydownfunction e var ctrlKey 67 vKey 86 if ekeyCode ctrlKey ampamp ekeyCode vKey 39idhfCharacterCount39valthisvallength 39idLbltedaCh39h

Apply characters and messages count for multiple TextBox using jQuery in ASP.Net

nedash

SOLVED CLOSED ACTIVE ANSWERED
User: nedash
Posted: on May 20, 2017 02:51 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 2585
Sample Code: Download

I have two textboxs in page that I want use character count for them

1-Txtmatn

2-Txtmatn1

I use below code for one of them(Txtmatn)

<script type="text/javascript">
    $(function () {
        var i = 0;
        $('[id*=Txtmatn]').keydown(function (e) {
            var ctrlKey = 67, vKey = 86;
            if (e.keyCode != ctrlKey && e.keyCode != vKey) {
                $('[id*=hfCharacterCount]').val($(this).val().length);
                $('[id*=LbltedaCh]').html(toPersianNumber($('[id*=hfCharacterCount]').val()));
                $('[id*=hfTextBoxValue]').val($(this).val());
                if ($(this).val().length % 70 == 0) {
                    if ($(this).val().length == 0) {
                        i = 0;

                        $('[id*=hfMessageCount]').val(i);
                        $('.MessageCount').html(toPersianNumber($('[id*=hfMessageCount]').val()));
 
                    }
                    else {
                        i = $(this).val().length / 70;
                        i = i + 1;

                        $('[id*=hfMessageCount]').val(i);
                        $('.MessageCount').html(toPersianNumber($('[id*=hfMessageCount]').val()));
                    }
                }
                else {
 
                    if ($(this).val().length == 0) {
 
                        i = 0;
                    }
                    else {
                        i = $(this).val().length / 70;
                        i = i + 1;
 
                        i = parseInt(i);
                    }

                    $('[id*=hfMessageCount]').val(i);
                    $('.MessageCount').html(toPersianNumber($('[id*=hfMessageCount]').val()));
                }
            }
        });
        $('[id*=Txtmatn]').keyup(function (e) {
            var ctrlKey = 67, vKey = 86;
            if (e.keyCode != ctrlKey && e.keyCode != vKey) {
                $('[id*=hfCharacterCount]').val($(this).val().length);
                $('[id*=LbltedaCh]').html(toPersianNumber($('[id*=hfCharacterCount]').val()));
                $('[id*=hfTextBoxValue]').val($(this).val());
                if ($(this).val().length % 70 == 0) {
                    if ($(this).val().length == 0) {
                        i = 0;

                        $('[id*=hfMessageCount]').val(i);
                        $('.MessageCount').html(toPersianNumber($('[id*=hfMessageCount]').val()));
 
                    }
                    else {
                        i = $(this).val().length / 70;
                        i = i + 1;
  
                        $('[id*=hfMessageCount]').val(i);
                        $('.MessageCount').html(toPersianNumber($('[id*=hfMessageCount]').val()));
                    }
                }
                else {
 
 
                    if ($(this).val().length == 0) {
                        i = 0;
                    }
                    else {
                        i = $(this).val().length / 70;
                        i = i + 1;
 
                        i = parseInt(i);
                    }

                    $('[id*=hfMessageCount]').val(i);
                    $('.MessageCount').html(toPersianNumber($('[id*=hfMessageCount]').val()));
                }
            }
        });
        $("[id*=Txtmatn]").bind('paste', function (e) {
            setTimeout(function () {
                $('[id*=hfCharacterCount]').val($("[id*=Txtmatn]").val().length);
                $('[id*=LbltedaCh]').html(toPersianNumber($('[id*=hfCharacterCount]').val()));
                $('[id*=hfTextBoxValue]').val($("[id*=Txtmatn]").val());
                var msgCount = "";
                if ($("[id*=Txtmatn]").val().length != 0) {
                    msgCount = $("[id*=Txtmatn]").val().length / 70;
                    msgCount = msgCount + 1;
                }
                else {
                    msgCount = 0;
                }

                msgCount = Math.floor(msgCount);
                $('[id*=hfMessageCount]').val(msgCount);
                $('.MessageCount').html(toPersianNumber($('[id*=hfMessageCount]').val()));
            }, 100);
        });
    });

    function toPersianNumber(input) {
        var inputstring = input;
        var persian = ["۰", "۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹"]
        for (var j = 0; j < persian.length; j++) {
            inputstring = inputstring.toString().replace(new RegExp(j, "g"), persian[j]);
        }
        return inputstring;
    }
</script>

and HTML code:

<div id="etebar1T">
    <div id="ete1T">
        <asp:HiddenField ID="hfMessageCount" runat="server" />
        <asp:HiddenField ID="hfCharacterCount" runat="server" />
        <asp:HiddenField ID="hfTextBoxValue" runat="server" />
        <asp:TextBox ID="Txtmatn" runat="server" TextMode="MultiLine" CssClass="txtPH1T"></asp:TextBox>
    </div>
    <div id="Tsend2T">
        <div id="ST1T">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div id="lblTM1T">
                        <asp:Label ID="LbltedaP" runat="server" CssClass="MessageCount"></asp:Label>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:Label ID="Label15" runat="server" CssClass="lblTP1T">تعداد پیامک:</asp:Label>
        </div>
        <div id="ST2">
            <asp:Label ID="LbltedaCh" runat="server" CssClass="lblTP"></asp:Label>
            <asp:Label ID="Label16" runat="server" CssClass="lblTP2T">تعداد کاراکتر:</asp:Label>
        </div>
    </div>
</div>

and this is image:

now I want use that codes for txtmatn1 below are txtmatn1 codes:

<div id="Div1">
    <div id="Div2">
        <asp:HiddenField ID="hfMessageCount1" runat="server" />
        <asp:HiddenField ID="hfCharacterCount1" runat="server" />
        <asp:HiddenField ID="hfTextBoxValue1" runat="server" />
        <asp:TextBox ID="Txtmatn1" runat="server" TextMode="MultiLine" CssClass="txtPH1T"></asp:TextBox>
    </div>
    <div id="Div3">
        <div id="Div4">
            <asp:UpdatePanel ID="UpdatePanel3" runat="server">
                <ContentTemplate>
                    <div id="Div5">
                        <asp:Label ID="Label14" runat="server" CssClass="MessageCount2"></asp:Label>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:Label ID="Label18" runat="server" CssClass="lblTP1T">تعداد پیامک:</asp:Label>
        </div>
        <div id="Div6">
            <asp:Label ID="LbltedaCh1" runat="server" CssClass="lblTP"></asp:Label>
            <asp:Label ID="Label20" runat="server" CssClass="lblTP2T">تعداد کاراکتر:</asp:Label>
        </div>
    </div>
</div>

how can use java codes for two textboxs

Best regarda

neda

dharmend...

0 1

Reply
ANSWER
User: dharmendr
Replied: on May 20, 2017 03:02 AM
Report

Hi nedash,

Refer below code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #left
        {
            float: left;
            width: 20%;
            overflow: hidden;
        }
        #right
        {
            float: left;
            width: 20%;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // For 1st Textbox
            var i = 0;
            $('[id$=Txtmatn]').keydown(function (e) {
                var ctrlKey = 67, vKey = 86;
                if (e.keyCode != ctrlKey && e.keyCode != vKey) {
                    $('[id$=hfCharacterCount]').val($(this).val().length);
                    $('[id$=LbltedaCh]').html(toPersianNumber($('[id$=hfCharacterCount]').val()));
                    $('[id$=hfTextBoxValue]').val($(this).val());
                    if ($(this).val().length % 70 == 0) {
                        if ($(this).val().length == 0) {
                            i = 0;
                            $('[id$=hfMessageCount]').val(i);
                            $('.MessageCount').html(toPersianNumber($('[id$=hfMessageCount]').val()));
                        }
                        else {
                            i = $(this).val().length / 70;
                            i = i + 1;
                            $('[id$=hfMessageCount]').val(i);
                            $('.MessageCount').html(toPersianNumber($('[id$=hfMessageCount]').val()));
                        }
                    }
                    else {
                        if ($(this).val().length == 0) { i = 0; }
                        else {
                            i = $(this).val().length / 70;
                            i = i + 1;
                            i = parseInt(i);
                        }
                        $('[id$=hfMessageCount]').val(i);
                        $('.MessageCount').html(toPersianNumber($('[id$=hfMessageCount]').val()));
                    }
                }
            });
            $('[id$=Txtmatn]').keyup(function (e) {
                var ctrlKey = 67, vKey = 86;
                if (e.keyCode != ctrlKey && e.keyCode != vKey) {
                    $('[id$=hfCharacterCount]').val($(this).val().length);
                    $('[id$=LbltedaCh]').html(toPersianNumber($('[id$=hfCharacterCount]').val()));
                    $('[id$=hfTextBoxValue]').val($(this).val());
                    if ($(this).val().length % 70 == 0) {
                        if ($(this).val().length == 0) {
                            i = 0;
                            $('[id$=hfMessageCount]').val(i);
                            $('.MessageCount').html(toPersianNumber($('[id$=hfMessageCount]').val()));
                        }
                        else {
                            i = $(this).val().length / 70;
                            i = i + 1;
                            $('[id$=hfMessageCount]').val(i);
                            $('.MessageCount').html(toPersianNumber($('[id$=hfMessageCount]').val()));
                        }
                    }
                    else {

                        if ($(this).val().length == 0) { i = 0; }
                        else {
                            i = $(this).val().length / 70;
                            i = i + 1;
                            i = parseInt(i);
                        }
                        $('[id$=hfMessageCount]').val(i);
                        $('.MessageCount').html(toPersianNumber($('[id$=hfMessageCount]').val()));
                    }
                }
            });
            $("[id$=Txtmatn]").bind('paste', function (e) {
                setTimeout(function () {
                    $('[id$=hfCharacterCount]').val($("[id$=Txtmatn]").val().length);
                    $('[id$=LbltedaCh]').html(toPersianNumber($('[id$=hfCharacterCount]').val()));
                    $('[id$=hfTextBoxValue]').val($("[id$=Txtmatn]").val());
                    var msgCount = "";
                    if ($("[id$=Txtmatn]").val().length != 0) {
                        msgCount = $("[id$=Txtmatn]").val().length / 70;
                        msgCount = msgCount + 1;
                    }
                    else { msgCount = 0; }
                    msgCount = Math.floor(msgCount);
                    $('[id$=hfMessageCount]').val(msgCount);
                    $('.MessageCount').html(toPersianNumber($('[id$=hfMessageCount]').val()));
                }, 100);
            });

            // For 2nd Textbox
            var j = 0;
            $('[id$=Txtmatn1]').keydown(function (e) {
                var ctrlKey = 67, vKey = 86;
                if (e.keyCode != ctrlKey && e.keyCode != vKey) {
                    $('[id$=hfCharacterCount1]').val($(this).val().length);
                    $('[id$=LbltedaCh1]').html(toPersianNumber($('[id$=hfCharacterCount1]').val()));
                    $('[id$=hfTextBoxValue1]').val($(this).val());
                    if ($(this).val().length % 70 == 0) {
                        if ($(this).val().length == 0) {
                            j = 0;
                            $('[id$=hfMessageCount1]').val(j);
                            $('.MessageCount2').html(toPersianNumber($('[id$=hfMessageCount1]').val()));
                        }
                        else {
                            j = $(this).val().length / 70;
                            j = j + 1;
                            $('[id$=hfMessageCount1]').val(j);
                            $('.MessageCount2').html(toPersianNumber($('[id$=hfMessageCount1]').val()));
                        }
                    }
                    else {
                        if ($(this).val().length == 0) { j = 0; }
                        else {
                            j = $(this).val().length / 70;
                            j = j + 1;
                            j = parseInt(j);
                        }
                        $('[id$=hfMessageCount1]').val(j);
                        $('.MessageCount2').html(toPersianNumber($('[id$=hfMessageCount1]').val()));
                    }
                }
            });
            $('[id$=Txtmatn1]').keyup(function (e) {
                var ctrlKey = 67, vKey = 86;
                if (e.keyCode != ctrlKey && e.keyCode != vKey) {
                    $('[id$=hfCharacterCount1]').val($(this).val().length);
                    $('[id$=LbltedaCh1]').html(toPersianNumber($('[id$=hfCharacterCount1]').val()));
                    $('[id$=hfTextBoxValue1]').val($(this).val());
                    if ($(this).val().length % 70 == 0) {
                        if ($(this).val().length == 0) {
                            j = 0;
                            $('[id$=hfMessageCount1]').val(i);
                            $('.MessageCount2').html(toPersianNumber($('[id$=hfMessageCount1]').val()));
                        }
                        else {
                            j = $(this).val().length / 70;
                            j = j + 1;
                            $('[id$=hfMessageCount1]').val(j);
                            $('.MessageCount2').html(toPersianNumber($('[id$=hfMessageCount1]').val()));
                        }
                    }
                    else {
                        if ($(this).val().length == 0) { j = 0; }
                        else {
                            j = $(this).val().length / 70;
                            j = j + 1;
                            j = parseInt(j);
                        }
                        $('[id$=hfMessageCount1]').val(j);
                        $('.MessageCount2').html(toPersianNumber($('[id$=hfMessageCount1]').val()));
                    }
                }
            });
            $("[id$=Txtmatn1]").bind('paste', function (e) {
                setTimeout(function () {
                    $('[id$=hfCharacterCount1]').val($("[id$=Txtmatn1]").val().length);
                    $('[id$=LbltedaCh1]').html(toPersianNumber($('[id$=hfCharacterCount1]').val()));
                    $('[id$=hfTextBoxValue1]').val($("[id$=Txtmatn1]").val());
                    var msgCount = "";
                    if ($("[id$=Txtmatn1]").val().length != 0) {
                        msgCount = $("[id$=Txtmatn1]").val().length / 70;
                        msgCount = msgCount + 1;
                    }
                    else { msgCount = 0; }
                    msgCount = Math.floor(msgCount);
                    $('[id$=hfMessageCount1]').val(msgCount);
                    $('.MessageCount2').html(toPersianNumber($('[id$=hfMessageCount1]').val()));
                }, 100);
            });
        });

        function toPersianNumber(input) {
            var inputstring = input;
            var persian = ["۰", "۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹"]
            for (var j = 0; j < persian.length; j++) { inputstring = inputstring.toString().replace(new RegExp(j, "g"), persian[j]); }
            return inputstring;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" />
    <div id="left">
        <div id="etebar1T">
            <div id="ete1T">
                <asp:HiddenField ID="hfMessageCount" runat="server" />
                <asp:HiddenField ID="hfCharacterCount" runat="server" />
                <asp:HiddenField ID="hfTextBoxValue" runat="server" />
                <asp:TextBox ID="Txtmatn" runat="server" TextMode="MultiLine" CssClass="txtPH1T"></asp:TextBox>
            </div>
            <div id="Tsend2T">
                <div id="ST1T">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <div id="lblTM1T">
                                <asp:Label ID="LbltedaP" runat="server" CssClass="MessageCount"></asp:Label>
                            </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                    <asp:Label ID="Label15" runat="server" CssClass="lblTP1T">تعداد پیامک:</asp:Label>
                </div>
                <div id="ST2">
                    <asp:Label ID="LbltedaCh" runat="server" CssClass="lblTP"></asp:Label>
                    <asp:Label ID="Label16" runat="server" CssClass="lblTP2T">تعداد کاراکتر:</asp:Label>
                </div>
            </div>
        </div>
    </div>
    <div id="right">
        <div id="Div1">
            <div id="Div2">
                <asp:HiddenField ID="hfMessageCount1" runat="server" />
                <asp:HiddenField ID="hfCharacterCount1" runat="server" />
                <asp:HiddenField ID="hfTextBoxValue1" runat="server" />
                <asp:TextBox ID="Txtmatn1" runat="server" TextMode="MultiLine" CssClass="txtPH1T"></asp:TextBox>
            </div>
            <div id="Div3">
                <div id="Div4">
                    <asp:UpdatePanel ID="UpdatePanel3" runat="server">
                        <ContentTemplate>
                            <div id="Div5">
                                <asp:Label ID="Label14" runat="server" CssClass="MessageCount2"></asp:Label>
                            </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                    <asp:Label ID="Label18" runat="server" CssClass="lblTP1T">تعداد پیامک:</asp:Label>
                </div>
                <div id="Div6">
                    <asp:Label ID="LbltedaCh1" runat="server" CssClass="lblTP"></asp:Label>
                    <asp:Label ID="Label20" runat="server" CssClass="lblTP2T">تعداد کاراکتر:</asp:Label>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Apply characters and messages count for multiple TextBox using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us