Asp.Net Dersleri – Asp.net TextBox kalan karakter sayısı

admin tarafından

24 Mayıs 2013 741 kez okundu Okuma süresi: 2dk, 42sn

Asp.Net Dersleri – Asp.net TextBox kalan karakter sayısı

Asp.Net ile textbox kutusuna girilecek olan karakter sayısını MaxLength ile ayarlayabiliyoruz. Kullanıcı Textbox kutusunu bilgi girişi yaptıkca kaç karakter daha yazabileceğini, textbox’ta kalan karakter sayısını gösterme işlemini uygulamamıza bir javascript kodu ekleyerek yapabiliriz.

function validateLimit(obj, divID, maxchar) {
    objDiv = get_object(divID);
    if (this.id) obj = this;
    var remaningChar = maxchar - trimEnter(obj.value).length;
    if (objDiv.id) {
        objDiv.innerHTML = remaningChar + " karakter daha yazabilirsiniz.";
    }
    if (remaningChar <= 0) {
        obj.value = obj.value.substring(maxchar, 0);
        if (objDiv.id) {
            objDiv.innerHTML = "0 karakter daha yazabilirsiniz.";
        }
        return false;
    }
    else
    { return true; }
}
function get_object(id) {
    var object = null;
    if (document.layers) {
        object = document.layers[id];
    } else if (document.all) {
        object = document.all[id];
    } else if (document.getElementById) {
        object = document.getElementById(id);
    }
    return object;
}
function trimEnter(dataStr) {
    return dataStr.replace(/(rn|r|n)/g, "");
}

bu kodları sayfamıza ekleyerek istediğimiz TextBox için geriye kalan karakter sayısını gösterebiliriz.
TextBox kontrolüne “onkeyup=”return validateLimit(this, ‘lblMsg1’, 240)”” kodları kalan karakter sayısını lblMsg1 isimli kontrolde gösterecektir. Uygulamanın tüm kodları aşağıda..:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>www.bilisimogretmeni.com</title>
     <script type="text/javascript">
         function validateLimit(obj, divID, maxchar) {
             objDiv = get_object(divID);
             if (this.id) obj = this;
             var remaningChar = maxchar - obj.value.length;
             if (objDiv) {
                 objDiv.innerHTML = remaningChar + " karakter daha yazabilirsiniz.";
             }
             if (remaningChar <= 0) {
                 obj.value = obj.value.substring(maxchar, 0);
                 if (objDiv) {
                     objDiv.innerHTML = "0 karakter daha yazabilirsiniz.";
                 }
                 return false;
             }
             else
             { return true; }
         }
         function get_object(id) {
             var object = null;
             if (document.layers) {
                 object = document.layers[id];
             } else if (document.all) {
                 object = document.all[id];
             } else if (document.getElementById) {
                 object = document.getElementById(id);
             }
             return object;
         }

     </script>
</head>
<body>
    <form id="form1" runat="server">
     <div> <br />
    <div id="lblMsg1">240 .karakter daha yazabilirsiniz.</div>
    <asp:TextBox ID="TextBox1" runat="server" Height="50px" MaxLength="240" 
        TextMode="MultiLine" Width="600px" ToolTip="Karakter Limiti:(240)" 
                    onkeyup="return validateLimit(this, 'lblMsg1', 240)"/>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
            ControlToValidate="TextBox1" Display="Dynamic" 
            SetFocusOnError="True">*</asp:RequiredFieldValidator>
    <br /><br /><br />
    <div id="lblMsg2">300 karakter daha yazabilirsiniz..</div>
    <asp:TextBox ID="TextBox2" runat="server" Height="50px" MaxLength="300" 
        TextMode="MultiLine" Width="600px" ToolTip="Karakter Limiti:(300)" 
                    onkeyup="return validateLimit(this, 'lblMsg2', 300)"/>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
            ControlToValidate="TextBox2" Display="Dynamic" 
            SetFocusOnError="True">*</asp:RequiredFieldValidator>
    <br /> <br />
    <br />
    </div>
    </form>
</body>
</html>

Bu İçeriğe Tepkin Ne Oldu?