PDA

View Full Version : مبتدی: تغییر رنگ تکست باکس با کلیک


mehran788
چهارشنبه 26 تیر 1392, 21:31 عصر
سلام .خسته نباشید
می خواستم با کلیک روی یک تکست باکس رنگش تغییر کنه
این کد رو نوشتم ولی کار نکرد و چند روش دیگه هم امتحان کردم وجواب نگرفتم
<html>
<head>
<link rel="stylesheet" type="text/css" href="Style.css" />
<script src="jquery.js"></script>
<script>
function tun-click(){
document.frmsignin.txtusername.style.color=#000000 ;
}
</script>
</head>
<body>
<div id="parent">
<div id="redframe"></div>
<div id="signin">
<form name="frmsignin">
<input type="text" name="txtusername" size="10" value="نام کاربری" onclick="tun-click" style="color: #C0C0C0"/>
<input type="text" name="txtpass" size="10" value="رمز عبور" style="color: #C0C0C0"/>
<input type="button" name="btnsignin" size="10" value="ورود"/>
</form>
</div>
</div>
</body>
</html>


ممنون میشم اگه کسی کمکم کنه
css-man
چهارشنبه 26 تیر 1392, 22:36 عصر
$(document).ready(function(){
$("#user").click(

function()
{
$(this).css("background-color","#F00");

});





});









<input type="text" name="username" id="user">





امیدوارم کارت راه بی افته
IamOverlord
چهارشنبه 26 تیر 1392, 22:39 عصر
سلام!

ببین اگه درست فهمیده باشم می خوای حالت focus رو با غیر focus فرق بذاری style هاشونو، این مثال رو امتحان کن... فقط با CSS و HTML هست:

<!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>
<style>
.textboxA {
background-color:#0CC;
}

.textboxA:focus {
background-color:#0CF;
}
</style>
</head>

<body>
<input type="text" class="textboxA" />
</body>
</html>
jalil_gh
چهارشنبه 26 تیر 1392, 23:01 عصر
شما باید تو برنامه نویسی جاوااسکریپت تو مرورگر به چند نکته توجه کنید.
‍۱. شما نمی‌تونید در نام تابع (یا هر متغیر دیگری) از خط تیره استفاده کنید.
۲. وقتی درون تگ از onclick استفاده می‌کنید،‌ نام تابعی که بعد از اون میارید باید به همراه پرانتز باشه.
۳. برای دادن مقدار رنگ به style یک عنصر باید اون رنگ رو داخل quotation mark بزارید.
با این اوصاف کدهای شما به این شکل در میاد:

<html>
<head>
<link rel="stylesheet" type="text/css" href="Style.css" />
<script src="jquery.js"></script>
<script>
function tunClick(){
document.frmsignin.txtusername.style.color= "#000000";
}
</script>
</head>
<body>
<div id="parent">
<div id="redframe"></div>
<div id="signin">
<form name="frmsignin">
<input type="text" name="txtusername" size="10" value="نام کاربری" onclick="tunClick()" style="color: #C0C0C0"/>
<input type="text" name="txtpass" size="10" value="رمز عبور" style="color: #C0C0C0"/>
<input type="button" name="btnsignin" size="10" value="ورود"/>
</form>
</div>
</div>
</body>
</html>
البته اگه میخایید از جی‌کوئری استفاده کنید جناب css-man در بالا روششو گفتن
mehran788
پنج شنبه 27 تیر 1392, 02:20 صبح
ممنون از لطفتون دوستان مشکلم حل شد
mehran788
پنج شنبه 27 تیر 1392, 02:37 صبح
سلام!

ببین اگه درست فهمیده باشم می خوای حالت focus رو با غیر focus فرق بذاری style هاشونو، این مثال رو امتحان کن... فقط با CSS و HTML هست:

<!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>
<style>
.textboxA {
background-color:#0CC;
}

.textboxA:focus {
background-color:#0CF;
}
</style>
</head>

<body>
<input type="text" class="textboxA" />
</body>
</html>

شرمنده یه سوال دیگه هم واسم پیش اومد
اینجور که دیدم کدهای شما بهتر از کدهای من بود که البته آقای jalil_gh زحمتش رو کشیدن و اصلاح کردن.چون یک کلاس تعریف می کنی و به کل تکست هایی که می خوای نسبت میدی
ولی حالا ممن می خوام اگه روی تکست کلیک کرد تکست خالی بشه که خوب واسه این باید شرط هم بذارم چون اگه کاربر چیزی نوشته باشه نباید خالی بشه
ولی فکر نکنم تو کدهای cssبشه شرط گذاشت حالا چطور با جاوا اسکریپت یه کلاس تعریف کنم
ممنون میشم کسی کمکم کنه
IamOverlord
پنج شنبه 27 تیر 1392, 03:15 صبح
سلام!


شرمنده یه سوال دیگه هم واسم پیش اومد
اینجور که دیدم کدهای شما بهتر از کدهای من بود که البته آقای jalil_gh زحمتش رو کشیدن و اصلاح کردن.چون یک کلاس تعریف می کنی و به کل تکست هایی که می خوای نسبت میدی
ولی حالا ممن می خوام اگه روی تکست کلیک کرد تکست خالی بشه که خوب واسه این باید شرط هم بذارم چون اگه کاربر چیزی نوشته باشه نباید خالی بشه
ولی فکر نکنم تو کدهای cssبشه شرط گذاشت حالا چطور با جاوا اسکریپت یه کلاس تعریف کنم
ممنون میشم کسی کمکم کنه

فکر کنم فهمیده باشم می خواید چی کار کنید...
اگه با CSS نشه با HTML5 که می شه! HTML5 یه امکان جالبی داره... صفت placeholder... واقعا کار آدمو آسون می کنه!


<!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>
<style>
.textboxA {
background-color:#FFF;
}

.textboxA:focus {
background-color:#DEF;
}
</style>
</head>

<body>
<input type="text" class="textboxA" placeholder="Enter your name here..." />
</body>
</html>
mehran788
پنج شنبه 27 تیر 1392, 18:16 عصر
ممنون داداش دقیقا منظورم همین بود