شمارش تعداد کاراکتر های باقی مانده در TextBox با استفاده از JavaScript
یکشنبه 17 اسفند 1393در این قسمت نحوه شمارش تعداد کارکتر های باقی مانده در کنترل TextBox و نمایش آنها را با استفاده از javaScript درد Asp.Net شرح می دهیم
ابتدا ویژوال استودیو را باز کرده و یک پروژه ایجاد می کنیم . سپس روی نام پروژه راست کلیک می کنیم و 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>
- ASP.net
- 4k بازدید
- 5 تشکر