JQuery Tips : เมธอด focus() เพื่อ focus element

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: JQuery Tips : เมธอด focus() เพื่อ focus element

JQuery Tips : เมธอด focus() เพื่อ focus element

by abdkode » 01/04/2019 4:05 pm

focus() เป็นเมธอดใน JQuery ที่ใช้ในการมุ่งเน้นไปที่ element นั้นๆ(focus) element จะได้รับการมุ่งเน้น(focus)โดยการคลิกเมาส์หรือปุ่มนำทางแท็บ(tab-navigating) ไปที่ element นั้น
รูปแบบ syntax ง่ายๆ คือ

Code: Select all

$(selector).focus(function) 
selector ในที่นี่คือองค์ประกอบที่เลือก เช่น input

พารามิเตอร์:สามารถรับพารามิเตอร์ได้ใน “ function ” เพื่อระบุฟังก์ชั่นที่จะทำงานเมื่อเกิดเหตุการณ์ focus ความหมายคือ เราสามารถเขียนฟังก์ชันเพิ่มเติมได้เพื่อบอกว่าเมื่อมีการ focus เกิดจะให้ทำอะไรต่อ หรือไม่จำเป็นต้องระบุฟังก์ชันเพิ่มก็ได้ โดยสามารถเขียนเป็น $("input").focus(); เลย
Return Value:คืนค่าองค์ประกอบที่เลือกเมื่อได้รับการ focus

ตัวอย่างโค้ดดังนี้

Code: Select all

<html> 

<head> 
	<style> 
		span { 
			display: none; 
		} 
		
		body { 
			width: 35%; 
			height: 50px; 
			border: 2px solid green; 
			padding: 35px; 
			margin: 10px; 
		} 
	</style> 
	<script src="https://code.jquery.com/jquery-1.10.2.js"> 
	</script> 
</head> 

<body> 
	<!-- this paragraph element get focused -->
	<p> 
		<input type="text"> <span>focused</span></p> 

	<!-- jQuery cdee to show working of this method -->
	<script> 
		$("input").focus(function() { 
			$(this).next("span").css("display", "inline"); 
		}); 
	</script> 

</body> 

</html> 
ผลลัพธ์ที่ได้เมื่อเปิดกับเบราเซอร์
focusesd.jpg
focusesd.jpg (9.35 KiB) Viewed 968 times
เมื่อคลิกที่ช่อง input คำว่า focused ที่เราเขียนไว้ในฟังก์ชันจะปรากฎขึ้น ดังผลลัพธ์ด้านล่างนี้
beforefocus.jpg
beforefocus.jpg (7.71 KiB) Viewed 968 times
นี้เป็น method ของ jQuery ที่น่าสนใจและใช้กันอย่างแพร่หลาย เราสามารถนำไปใช้การสร้างฟอร์มหรือelement อื่นของเราให้ดูน่าสนใจยิ่งขึ้นไม่ว่าจะนำ CSS ก็ได้ครับ
นอกจากนี้แล้วยังมี method อื่นๆอีกมากมายที่น่าสนใจ ไว้จะเขียนในโอกาศต่อไปครับ

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : JQuery
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

Top