JQuery Tips : เมธอด focus() เพื่อ focus element
โพสต์แล้ว: 01/04/2019 4:05 pm
focus() เป็นเมธอดใน JQuery ที่ใช้ในการมุ่งเน้นไปที่ element นั้นๆ(focus) element จะได้รับการมุ่งเน้น(focus)โดยการคลิกเมาส์หรือปุ่มนำทางแท็บ(tab-navigating) ไปที่ element นั้น
รูปแบบ syntax ง่ายๆ คือ
selector ในที่นี่คือองค์ประกอบที่เลือก เช่น input
พารามิเตอร์:สามารถรับพารามิเตอร์ได้ใน “ function ” เพื่อระบุฟังก์ชั่นที่จะทำงานเมื่อเกิดเหตุการณ์ focus ความหมายคือ เราสามารถเขียนฟังก์ชันเพิ่มเติมได้เพื่อบอกว่าเมื่อมีการ focus เกิดจะให้ทำอะไรต่อ หรือไม่จำเป็นต้องระบุฟังก์ชันเพิ่มก็ได้ โดยสามารถเขียนเป็น $("input").focus(); เลย
Return Value:คืนค่าองค์ประกอบที่เลือกเมื่อได้รับการ focus
ตัวอย่างโค้ดดังนี้
ผลลัพธ์ที่ได้เมื่อเปิดกับเบราเซอร์
เมื่อคลิกที่ช่อง input คำว่า focused ที่เราเขียนไว้ในฟังก์ชันจะปรากฎขึ้น ดังผลลัพธ์ด้านล่างนี้
นี้เป็น method ของ jQuery ที่น่าสนใจและใช้กันอย่างแพร่หลาย เราสามารถนำไปใช้การสร้างฟอร์มหรือelement อื่นของเราให้ดูน่าสนใจยิ่งขึ้นไม่ว่าจะนำ CSS ก็ได้ครับ
นอกจากนี้แล้วยังมี method อื่นๆอีกมากมายที่น่าสนใจ ไว้จะเขียนในโอกาศต่อไปครับ
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : JQuery
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP
รูปแบบ syntax ง่ายๆ คือ
โค้ด: เลือกทั้งหมด
$(selector).focus(function) พารามิเตอร์:สามารถรับพารามิเตอร์ได้ใน “ function ” เพื่อระบุฟังก์ชั่นที่จะทำงานเมื่อเกิดเหตุการณ์ focus ความหมายคือ เราสามารถเขียนฟังก์ชันเพิ่มเติมได้เพื่อบอกว่าเมื่อมีการ focus เกิดจะให้ทำอะไรต่อ หรือไม่จำเป็นต้องระบุฟังก์ชันเพิ่มก็ได้ โดยสามารถเขียนเป็น $("input").focus(); เลย
Return Value:คืนค่าองค์ประกอบที่เลือกเมื่อได้รับการ focus
ตัวอย่างโค้ดดังนี้
โค้ด: เลือกทั้งหมด
<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>
- beforefocus.jpg (7.71 KiB) Viewed 2142 times
- focusesd.jpg (9.35 KiB) Viewed 2142 times
นอกจากนี้แล้วยังมี method อื่นๆอีกมากมายที่น่าสนใจ ไว้จะเขียนในโอกาศต่อไปครับ
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : JQuery
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP