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

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
Posts: 362
Joined: 07/01/2019 9:56 am

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

Postby 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>

ผลลัพธ์ที่ได้เมื่อเปิดกับเบราเซอร์
beforefocus.jpg
beforefocus.jpg (7.71 KiB) Viewed 581 times

เมื่อคลิกที่ช่อง input คำว่า focused ที่เราเขียนไว้ในฟังก์ชันจะปรากฎขึ้น ดังผลลัพธ์ด้านล่างนี้
focusesd.jpg
focusesd.jpg (9.35 KiB) Viewed 581 times

นี้เป็น method ของ jQuery ที่น่าสนใจและใช้กันอย่างแพร่หลาย เราสามารถนำไปใช้การสร้างฟอร์มหรือelement อื่นของเราให้ดูน่าสนใจยิ่งขึ้นไม่ว่าจะนำ CSS ก็ได้ครับ
นอกจากนี้แล้วยังมี method อื่นๆอีกมากมายที่น่าสนใจ ไว้จะเขียนในโอกาศต่อไปครับ

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

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 2 guests