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

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

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

abdkode
PHP Super Member
PHP Super Member
โพสต์: 362
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

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

โพสต์โดย abdkode » 01/04/2019 4:05 pm

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

โค้ด: เลือกทั้งหมด

$(selector).focus(function)

selector ในที่นี่คือองค์ประกอบที่เลือก เช่น input

พารามิเตอร์:สามารถรับพารามิเตอร์ได้ใน “ 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
beforefocus.jpg (7.71 KiB) เปิดดู 486 ครั้ง

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

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

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

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน