วิธีเพิ่มแป้นพิมพ์ลัดในเว็บไซต์ของคุณ

ชอบแป้นพิมพ์ลัดหรือไม่ พวกเขาสามารถช่วยคุณประหยัดเวลาได้มากไหม คุณต้องการที่จะเพิ่มทางลัดแป้นพิมพ์ไปยังเว็บไซต์ของคุณเองเพื่อประโยชน์ของผู้เข้าชมของคุณหรือไม่ มันจะช่วยปรับปรุงการเข้าถึงและการนำทางในไซต์ของคุณอย่างมาก.

ในโพสต์นี้ฉันจะให้คำแนะนำสั้น ๆ เกี่ยวกับวิธีเพิ่มทางลัดไปยังหน้าเว็บของคุณโดยใช้ไลบรารี JavaScript ชื่อ Mousetrap ด้วย Mousetrap คุณสามารถ กำหนดคีย์ เช่น Shift, Ctrl, Alt, Options และ Command to ทำหน้าที่เฉพาะในเว็บไซต์ของคุณ. มันทำงานได้ดีกับเบราว์เซอร์รุ่นเก่า.

เพิ่มเติมเกี่ยวกับ Hongkiat:

• การสร้างคำแนะนำแบบเคลื่อนไหวได้อย่างง่ายดายด้วย Hint.Css
• การสร้างคำแนะนำทีละขั้นตอนโดยใช้ Intro.Js [บทแนะนำ]
• วิธีจัดสไตล์ตัวเลื่อนช่วง HTML5
• วิธีใช้คุกกี้ & HTML5 localStorage

เริ่มต้นใช้งาน

เริ่มต้นด้วยการสร้างเอกสาร HTML ใหม่พร้อมกับเนื้อหาและเชื่อมโยงไลบรารี Mousetrap ฉันจะใช้ห้องสมุด Mousetrap ที่โฮสต์ใน CDNjs เพื่อให้ห้องสมุดสามารถให้บริการผ่านเครือข่าย CloudFlare ซึ่งควรเร็วกว่าเซิร์ฟเวอร์ของเราเอง

ตอนนี้เราจะใช้กับดักหนู 'ผูก' วิธีการแนบแป้นคีย์บอร์ดพร้อมฟังก์ชั่น คุณสามารถกำหนด คีย์เดี่ยวคีย์ผสมหรือคีย์ลำดับ, ตัวอย่างเช่น

คีย์เดี่ยว

ในตัวอย่างนี้เราผูก s.

 Mousetrap.bind ('s', function (e) // ฟังก์ชันของคุณที่นี่…); 

รหัสผสม

ในตัวอย่างนี้เราผูก Ctrl และ s คุณจะต้องกดปุ่มทั้งสองพร้อมกันเพื่อใช้งานฟังก์ชั่นที่กำหนด.

 Mousetrap.bind ('ctrl + s', ฟังก์ชัน (e) // ฟังก์ชั่นของคุณที่นี่ ... ); 

คีย์ลำดับ

ในตัวอย่างนี้ผู้ใช้จะต้องกด g แล้ว s ต่อมา หากคุณกำลังพัฒนาเกมบนเว็บสิ่งนี้อาจเป็นประโยชน์สำหรับการเพิ่มคำสั่งผสมคีย์ลับที่ซ่อนอยู่.

 Mousetrap.bind ('g s', function (e) // ฟังก์ชั่นของคุณที่นี่ ... ); 

ใช้กับดักหนู

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

เริ่มจากสิ่งที่ง่ายกันเถอะ.

พวกเราจะไปผูกกุญแจที่จะช่วยให้ผู้ใช้สามารถมุ่งเน้นไปที่ช่องใส่การค้นหาได้อย่างรวดเร็ว.

1. ต่อไปนี้เป็นมาร์กอัป HTML สำหรับการค้นหาพร้อมกับ รหัส.

2. ถัดไปเราสร้างฟังก์ชั่นที่จะมุ่งเน้นไปที่อินพุตการค้นหา.

 การค้นหาฟังก์ชั่น () var search = $ ('# search'); search.val ("); search.focus (); 

3. สุดท้ายเราผูกกุญแจเพื่อเรียกใช้ฟังก์ชัน.

 Mousetrap.bind ('/' ค้นหา); 

4. นั่นแหล่ะ ตอนนี้คุณควรจะสามารถนำทางไปยังอินพุตการค้นหาโดยกดปุ่ม /.

หรือคุณอาจผูกคีย์ผสม Ctrl / Cmd + F ซึ่งเป็นปุ่มลัดยอดนิยมที่ใช้สำหรับการค้นหาในแอพเดสก์ท็อปหลาย ๆ

 Mousetrap.bind (['command + f', 'ctrl + f'], การค้นหา); 

การใช้ Mousetrap กับ Bootstrap

มันง่ายในการรวม Mousetrap เข้ากับเฟรมเวิร์กเช่น Bootstrap ในตัวอย่างที่สองนี้เราจะแสดงหน้าต่างวิธีใช้ที่จะแสดงรายการทางลัดที่มีอยู่ในเว็บไซต์ ที่นี่ฉันเลือก Bootstrap Modal เพื่อนำเสนอรายการและกำหนด? ปุ่มเพื่อแสดงเป็นกิริยาช่วย.

แม้ว่า ? สามารถเข้าถึงได้ด้วยปุ่ม Shift เท่านั้นและมีผลผูกพัน? คีย์นั้นเพียงพอ.

 Mousetrap.bind ('?', ฟังก์ชัน () $ ('# help'). modal ('แสดง');); 

ตอนนี้เมื่อคุณกดปุ่ม? คีย์ป๊อปอัปจะปรากฏขึ้น.

เคล็ดลับสำหรับการเข้าเล่มที่มีประสิทธิภาพ

เมื่อเวลาผ่านไปชุดแป้นพิมพ์ลัดที่เพิ่มขึ้นของคุณอาจเริ่มทำให้รหัสของคุณยุ่งเหยิง หากสิ่งนี้เกิดขึ้นมีส่วนขยายที่คุณสามารถเพิ่มได้ “การเชื่อมโยงคีย์” รหัสมีประสิทธิภาพมากขึ้น มันมีชื่อว่า “ผูกพจนานุกรม”. เพิ่มส่วนขยายนี้หลังจากไลบรารี Mousetrap หลัก, mousetrap.min.js.

ตอนนี้แทนที่จะแยกการเชื่อมโยงแต่ละคีย์เราสามารถจัดกลุ่มไว้ในที่เดียวได้อย่างเรียบร้อย .ผูก() วิธีการเช่น:

 Mousetrap.bind ('/': ค้นหา, 't': tweet, '?': ฟังก์ชั่น modal () $ ('# help'). modal ('แสดง');, 'j': ฟังก์ชั่นถัดไป ( ) highLight ('j'), 'k': ฟังก์ชัน prev () highLight ('k')); 

สำหรับการใช้งานขั้นสูงเพิ่มเติมคุณสามารถดูการสาธิตที่ฉันทำ ในการสาธิตคุณสามารถกดปุ่ม J หรือ K เพื่อไฮไลต์โพสต์และกด T เพื่อทวีตโพสต์ปัจจุบันที่คุณไฮไลต์.

• ดูการสาธิต
• ดาวน์โหลด