ایمان مدائنی
یک شنبه 29 اردیبهشت 1392, 16:47 عصر
سلام دوستان
همانطور که میدونید امروزه جی کوئری به مابرنامه نویسان این امکان رو داده تا بتونیم صفحات زیبا و شکیل بسازیم
حالا من قصد دارم هروز مقالات و آموزش هایی در همه زمینه ها براتون بزارم
امروز آموزش خالی کردن تکس باکس یا Input وقتی کاربر وارد آن می شود یا روی آن کلیک میکند رو براتون بزارم
خب شروع میکنیم اول باید کتابخانه Jquery رو به صفحه اضافه کنیم
<mce:script src="http://code.jquery.com/jquery-1.8.2.js" mce_src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></mce:script>
بعد در همان قسمت Head صفحه HTML کد زیر را مینویسیم
<mce:script type="text/javascript"><!--
$(function() {
$('#txtuser').focus(function() {
$(this).val('');
});
});
کد بالا مسئول مدیریت تکس باکسی با نام txtuser می باشد
<input type="text" id="txtuser" value="نام خود را وارد کنید" />
یعنی زمانی که کاربر روی این کنترل کلیک کنه مقدار داخل آن خالی میشه
حال اگر بخواهیم هرچند تا کنترل تکس باکس روی صفحه هست وقتی کاربر روی آن کلیک کرد مقدار داخل آن خالی بشه از کد زیر استفاده میکنیم
$(function () {
$('input[type=text]').focus(function () {
$(this).val('');
})
})
کد های نهایی به شکل زیر میباشد
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Jquery_Null_Focus.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<mce:script src="http://code.jquery.com/jquery-1.8.2.js" mce_src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
$(function() {
$('#txtuser').focus(function() {
$(this).val('');
});
});
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="txtuser" value="نام خود را وارد کنید" />
</div>
</form>
</body>
</html>
موفق و پیروز باشید
منبع مقاله و در یافت نمونه (http://www.madaeny.com/Article/534/)
همانطور که میدونید امروزه جی کوئری به مابرنامه نویسان این امکان رو داده تا بتونیم صفحات زیبا و شکیل بسازیم
حالا من قصد دارم هروز مقالات و آموزش هایی در همه زمینه ها براتون بزارم
امروز آموزش خالی کردن تکس باکس یا Input وقتی کاربر وارد آن می شود یا روی آن کلیک میکند رو براتون بزارم
خب شروع میکنیم اول باید کتابخانه Jquery رو به صفحه اضافه کنیم
<mce:script src="http://code.jquery.com/jquery-1.8.2.js" mce_src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></mce:script>
بعد در همان قسمت Head صفحه HTML کد زیر را مینویسیم
<mce:script type="text/javascript"><!--
$(function() {
$('#txtuser').focus(function() {
$(this).val('');
});
});
کد بالا مسئول مدیریت تکس باکسی با نام txtuser می باشد
<input type="text" id="txtuser" value="نام خود را وارد کنید" />
یعنی زمانی که کاربر روی این کنترل کلیک کنه مقدار داخل آن خالی میشه
حال اگر بخواهیم هرچند تا کنترل تکس باکس روی صفحه هست وقتی کاربر روی آن کلیک کرد مقدار داخل آن خالی بشه از کد زیر استفاده میکنیم
$(function () {
$('input[type=text]').focus(function () {
$(this).val('');
})
})
کد های نهایی به شکل زیر میباشد
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Jquery_Null_Focus.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<mce:script src="http://code.jquery.com/jquery-1.8.2.js" mce_src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
$(function() {
$('#txtuser').focus(function() {
$(this).val('');
});
});
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="txtuser" value="نام خود را وارد کنید" />
</div>
</form>
</body>
</html>
موفق و پیروز باشید
منبع مقاله و در یافت نمونه (http://www.madaeny.com/Article/534/)