شمارش تعداد کاراکتر های باقی مانده در TextBox با استفاده از JavaScript

در این قسمت نحوه شمارش تعداد کارکتر های باقی مانده در کنترل TextBox و نمایش آنها را با استفاده از javaScript درد Asp.Net شرح می دهیم

شمارش تعداد کاراکتر های باقی مانده در TextBox با استفاده از JavaScript

ابتدا ویژوال استودیو را باز کرده و یک پروژه ایجاد می کنیم . سپس روی نام پروژه راست کلیک می کنیم و Add را می زنیم و یک Web Form با نام Default.aspx میسازیم .یک کنترل TextBox به صفحه اضافه می کنیم . در قسمت Head صفحه مورد نظر کد مربوط به جاوا اسکریپت را می نویسیم . سپس خاصیت MaxLength را برای TextBox مقدار 20 تنظیم می کنیم .

    <head id="Head1" runat="server">  
        <title>Remaining Character Counter</title>  
        <script type="text/javascript">  
            function Count() {  
      
                var i = document.getElementById("mylabel").value.length;  
                document.getElementById("display").innerHTML = 20 - i;  

            }  
        </script>  
    </head> 

کد مربوط به صفحه :

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="RemainingCharacterCounter._Default" %>  
      
    <!DOCTYPE html>  
      
    <html>  
    <head id="Head1" runat="server">  
        <title>Remaining Character Counter</title>  
        <script type="text/javascript">  
            function Count() {  
      
                var i = document.getElementById("mylabel").value.length;  
                document.getElementById("display").innerHTML = 20 - i; 
     
            }  
        </script>  
    </head>  
    <body>  
        <form id="form1" runat="server">  
            <div>  
                <p style=" color:blue; width: 323px; z-index: 1; left: 506px; top: 13px; position: absolute; height: 19px; margin-left: 22px; margin-bottom: 12px;"> Welcome to Remaining Character Counting Page </p>  
                <asp:Panel ID="Panel1" runat="server" BorderColor="#000000" BorderStyle="Groove"  Style="width: 360px; left: 506px; top: 73px; position: absolute; height: 142px; right: 291px;">  
                    <br />  
                    <asp:Label ID="label" runat="server" Text="  Enter your Text here: " style="z-index: 1; color:red; left: 42px; top: 43px; position: absolute"></asp:Label>  
                    <asp:TextBox ID="mylabel" runat="server" MaxLength="20" onkeyup="Count()" style="width: 128px; left: 184px; top: 38px; position: absolute; height: 20px; right: 40px; " > </asp:TextBox>  
                    <br />  
                    <br />  
                    <asp:Label ID="NewLabel" runat="server"  Text="Remaining Characters: " style="z-index: 1; color:red; left: 38px; top: 80px; position: absolute"></asp:Label>  
                    <asp:Label ID="display" runat="server" Text="20" style="width: 26px; color:blueviolet; left: 190px; top: 82px; position: absolute; height: 25px; margin-right: 8px; z-index: 1;"></asp:Label>  
                </asp:Panel>  
            </div>  
        </form>  
    </body>  
    </html>

 

دانلود فایل های ضمیمه مخصوص اعضای سایت می باشد !
کاربر مهمان! جهت دانلود و استفاده از امکانات سایت لطفا وارد سایت شوید و یا ثبت نام کنید