|
 |
| |
วิธีเปลี่ยนสี border ของ text Field เมื่อเราคลิก เปลี่ยนสีเหมือน google search |
| |
 |
|
|
 |
 |
|
Code (PHP)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.txtborder{
border:solid 2px #F00;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#txt').focus(function(){
$(this).addClass('txtborder');
});
$('#txt').blur(function(){
$(this).removeClass('txtborder');
});
});
</script>
</head>
<body>
<input type="text" name="txt" id="txt" />
</body>
</html>
|
 |
 |
 |
 |
| Date :
2011-10-26 15:26:09 |
By :
ไวยวิทย์ |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
name สามารถตั้งชื่อ เหมือนกันได้ โดยมันจะมองเป็น array ครับ
แต่ id ไม่สามารถตั้งซ้ำกันได้ครับ มันจะเห็นตัวแรกเพียงตัวเดียว
วิธีแก้คือเอา id ออกครับ แล้วไปแก้โค้ด javascript นิดหน่อย
Code (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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.txtborder{
border:solid 2px #F00;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('input[name=txt]').focus(function(){
$(this).addClass('txtborder');
});
$('input[name=txt]').blur(function(){
$(this).removeClass('txtborder');
});
});
</script>
</head>
<body>
<input type="text" name="txt" />
<input type="text" name="txt" />
<input type="text" name="txt" />
</body>
</html>
|
| |
|
|
| |
| Date :
2011-12-17 22:22:20 |
By :
kerb |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
คือหนูต้องการ ใส่ name ที่ไม่ซ้ำกันค่ะ เพราะ text field เยอะมาก เลยอยากใส่ name ของแต่ละ text field ไม่ให้ซ้ำกันค่ะ
ขอบคุณล่วงหน้าสำหรับทุกคำตอบน่ะค่ะ
|
| |
|
|
| |
| Date :
2011-12-17 23:12:29 |
By :
banana_bnn |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ลองใช้ css event บางบราวเซอร์ทำงานคับ
แต่ใช้ jquery ทุกบราวเซอร์
$(':text')
|
ประวัติการแก้ไข
2011-12-17 23:28:52
| |
|
|
| |
| Date :
2011-12-17 23:26:36 |
By :
pjgunner.com |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ยังไงค่ะ พี่เอี๋ยว คือจาก code ด้านล่างนี้หนูต้องทำยังไงค่ะ แก้ตรงไหนค่ะ แล้ว $(':text') เอาไปแทรไว้ตรงไหนค่ะ
ขอบคุณล่วงหน้าน่ะค่ะ
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.txtborder{
border:solid 2px #F00;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('input[name=txt]').focus(function(){
$(this).addClass('txtborder');
});
$('input[name=txt]').blur(function(){
$(this).removeClass('txtborder');
});
});
</script>
</head>
<body>
<input type="text" name="txt" />
<input type="text" name="txt" />
<input type="text" name="txt" />
</body>
</html>
|
ประวัติการแก้ไข
2011-12-18 08:36:06
| |
|
|
| |
| Date :
2011-12-18 08:34:08 |
By :
banana_bnn |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
กรณีถ้าต้องการใช้ name ต่างกัน ก็ทำได้ครับ แต่ตั้งชื่อให้มันมี pattern เช่น
txt_name, txt_surname, txt_age ประมาณนี้ แล้วเราก็ปรับ javascript นิดเดียว
จาก $('input[name=txt]') ความหมายคือ อ้างถึง input tag ที่มีค่า name เท่ากับ 'txt'
แก้เป็นแบบนี้ $('input[name^=txt]') ความหมายคือ อ้างถึง input tag ที่มีค่า name ขึ้นต้นด้วย 'txt'
Code (PHP)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.txtborder{
border:solid 2px #F00;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('input[name^=txt]').focus(function(){
$(this).addClass('txtborder');
});
$('input[name^=txt]').blur(function(){
$(this).removeClass('txtborder');
});
});
</script>
</head>
<body>
<input type="text" name="txt_name" />
<input type="text" name="txt_surname" />
<input type="text" name="txt_age" />
</body>
</html>
|
| |
|
|
| |
| Date :
2011-12-18 09:08:13 |
By :
kerb |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
คับ ตรง $('') เห็นมั้ย ตรง string ที่ใส่ มันเป็น selector คือเลือก element, กลุ่ม element
:text คือ textbox ทั้งหมด
ถ้าหากคุณไม่ต้องการ textbox ทั้งหมด แต่ textbox นั้นอยู่ใน div หรืออยู่ในฟอร์ม (ลูกหลานเหลน - -)
ลอง (ใช้ space)
$('form :text')
#id คือ อีลีเมนต์ที่มี id="id"
.class คือ element ที่มี class="class"
ลองศึกษา selector เพิ่มเติม คับ ผมอธืิบายไม่ถูก มันมีเยอะ ใช้ตามใจชอบ
http://www.pjgunner.com
|
| |
|
|
| |
| Date :
2011-12-18 09:43:33 |
By :
pjgunner.com |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ได้แล้วค่ะ ขอบคุณมากค่ะ
|
| |
|
|
| |
| Date :
2011-12-18 10:32:48 |
By :
banana_bnn |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ถ้าเป็น select option ล่ะค่ะ ทำได้ไหมค่ะ ให้มันขึ้นสีกรอบเข้ม เวลาเราคลิ๊ก
แล้วพี่พอจะมี code css ที่กำหนดสีให้ text field ไหมค่ะ
ขอบคุณล่วงหน้าค่ะ
|
| |
|
|
| |
| Date :
2011-12-19 19:47:18 |
By :
banana_bnn |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 02
|
