Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,030

HOME > PHP > PHP Forum > text box แบบใส่รูปได้ คือต้องการพิมพ์แล้วให้รูปหาย



 

text box แบบใส่รูปได้ คือต้องการพิมพ์แล้วให้รูปหาย

 



Topic : 027479

Guest




text box แบบใส่รูปได้ คือต้องการพิมพ์แล้วให้รูปหายไป จะปรับแต่งยังไงคับ

<style type="text/css">
<!--
.tb-bg-image {
background-image: url(bg.png);
border: 1px solid #6297BC;
}
-->
</style>

<input type="text" name="textfield" class="tb-bg-image">



Tag : - - - -







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2009-05-19 15:02:18 By : baipan View : 1979 Reply : 4
 

 

No. 1



โพสกระทู้ ( 830 )
บทความ ( 0 )



สถานะออฟไลน์


Code
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Marosdee" />
<script type="text/javascript">
window.onload = function()
{
document.getElementById('textfield').onfocus = function()
{
this.setAttribute("class", "tb-bg-image-none");
}
document.getElementById('textfield').onblur = function()
{
if (this.value == '')
this.setAttribute("class", "tb-bg-image");
else
this.setAttribute("class", "tb-bg-image-none");
}
}
</script>
<style type="text/css">
<!--
.tb-bg-image
{
background-color: #CCFFFF;
background-image: url(bg.png);
border: 1px solid #6297BC;
}
.tb-bg-image-none
{
background: none;
border: 1px solid #6297BC;
}
-->
</style>
<title>Untitled 4</title>
</head>

<body>

<input type="text" name="textfield" id="textfield" class="tb-bg-image" onfocus="" onblur="" />

</body>
</html>



ลองดูครับ

ปรับแต่งตรง class อย่างเดียวเลย






Date : 2009-05-19 15:47:49 By : danya
 


 

No. 2



โพสกระทู้ ( 830 )
บทความ ( 0 )



สถานะออฟไลน์


แบบนี้ ก็ได้

Code (PHP)
<?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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Marosdee" />
<style type="text/css">
<!--
.tb-bg-image 
{	
	background-color: #CCFFFF;
	background-image: url(bg.png);
	border: 1px solid #6297BC;
}
.tb-bg-image-none 
{	
	background: none;
	border: 1px solid #6297BC;
}
-->
</style>
	<title>Untitled 4</title>
</head>

<body>

<input type="text" name="textfield" id="textfield" class="tb-bg-image" onfocus="this.setAttribute('class', 'tb-bg-image-none');" onblur="if (this.value == '') this.setAttribute('class', 'tb-bg-image');else this.setAttribute('class', 'tb-bg-image-none');" />

</body>
</html>
?>


เออ

ผมลองกับ IE 6 มันไม่รองรับแฮะ

งงเหมือนกัน
Date : 2009-05-19 15:53:59 By : danya
 

 

No. 3



โพสกระทู้ ( 90 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ขอบคุณน่ะครับ
Date : 2009-05-19 16:01:17 By : wiroon152
 


 

No. 4



โพสกระทู้ ( 830 )
บทความ ( 0 )



สถานะออฟไลน์


เอาใหม่ๆ อันนี้ รองรับ IE ด้วย

ไปมั่วมา 555+

Code (PHP)
<?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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Marosdee" />
<script type="text/javascript">

	function getUserAgent()
	{
		if ( navigator.userAgent.indexOf('IE')!= -1 )
			return true;
		else
			return false;
	}
	
	window.onload = function()
	{ 
		var IE = getUserAgent();

		document.getElementById('textfield').onfocus = function() 
		{ 
			if (IE)
				this.setAttribute('className', 'tb-bg-image-none');
			else
				this.setAttribute('class', 'tb-bg-image-none');
			//this.style.className = 'tb-bg-image-none';
		}
		document.getElementById('textfield').onblur = function() 
		{ 
			if (this.value == '') 
				if (IE)
					this.setAttribute('className', 'tb-bg-image');
				else
					this.setAttribute('class', 'tb-bg-image');
			else 
				if (IE)
					this.setAttribute('className', 'tb-bg-image-none');
				else
					this.setAttribute('class', 'tb-bg-image-none');
		}
	}
</script>
<style type="text/css">
<!--
.tb-bg-image 
{	
	background-color: #CCFFFF;
	background-image: url(bg.png);
	border: 1px solid #6297BC;
}
.tb-bg-image-none 
{	
	background: none;
	border: 1px solid #6297BC;
}
-->
</style>
	<title>Untitled 4</title>
</head>

<body>

<input type="text" name="textfield" id="textfield" class="tb-bg-image" />

</body>
</html>
?>

Date : 2009-05-19 16:14:56 By : danya
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : text box แบบใส่รูปได้ คือต้องการพิมพ์แล้วให้รูปหาย
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่