วิธีไฮไลต์ข้อความอัตโนมัติเมื่อผู้ใช้คลิก

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

หากคุณพบเว็บไซต์เช่น TheNextWeb คุณจะพบว่า URL ของ shortlink นั้นถูกเน้นเมื่อคุณคลิก เรามาดูกันว่ามันทำอย่างไร.

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

ในการเริ่มต้นเราจะวาง HTML ที่ล้อม URL shortlink.

 
 shortlink 
  http://goo.gl/9JEpOz 
 
 

เรามี URL อยู่ใน ระยะ องค์ประกอบพร้อมกับไอคอนจาก Ionicon รูปแบบขององค์ประกอบเหล่านี้ขึ้นอยู่กับคุณทั้งหมดขึ้นอยู่กับรูปแบบเว็บไซต์ของคุณ แต่เพื่อจุดประสงค์ของการสาธิตนี้ฉันจัดสไตล์ด้วยวิธีนี้:

มันง่ายสีน้ำเงินและสแควร์ (คว้ารหัสสไตล์ที่นี่).

จาวาสคริปต์

และนี่คือเนื้อของรหัสจาวาสคริปต์ แผนนี่คือการ ไฮไลต์ URL เมื่อผู้ใช้คลิก.

เราเริ่มต้นโค้ดด้วยตัวแปรที่เลือกองค์ประกอบที่ผู้ใช้จะคลิก.

 var target = document.querySelector ('. shortlink'); 

querySelector เป็นวิธี JavaScript เพื่อเลือกองค์ประกอบ; มันทำงานเหมือนตัวสร้าง jQuery $ (). คุณสามารถใช้เครื่องหมายจุดเพื่อรับองค์ประกอบโดยชั้นเรียนหรือ # สัญกรณ์ที่จะได้รับองค์ประกอบตาม ID.

ต่อไปเราต้องสร้างฟังก์ชัน JavaScript ใหม่.

 การเลือกฟังก์ชั่น (elem)  

เราตั้งชื่อฟังก์ชั่นของเราเป็น เลือก (). และอย่างที่คุณเห็นด้านบนฟังก์ชั่นต้องการพารามิเตอร์ที่จะผ่านองค์ประกอบที่ล้อม URL หรือข้อความปกติใด ๆ ที่เราต้องการเน้น ในกรณีของเรานี่จะเป็น ระยะ องค์ประกอบด้วย shortlink__url ชั้น.

ภายในฟังก์ชั่นนี้เราเพิ่มตัวแปรอีกสองสามอย่าง:

 var target = document.querySelector ('. shortlink'); การเลือกฟังก์ชั่น (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange ();  

ก่อนอื่น elem ตัวแปรเลือกองค์ประกอบที่เราผ่านพารามิเตอร์ของฟังก์ชัน ตัวแปรที่สอง, เลือก, เรียกใช้ฟังก์ชัน JavaScript ดั้งเดิมเพื่อรับการเลือกข้อความ ตัวแปรสุดท้าย, พิสัย ควบคุมช่วงการเลือก; เราต้องการให้แน่ใจว่าการเลือกนั้นอยู่ในองค์ประกอบที่เลือกเท่านั้น.

ต่อไปเราจะโยงตัวแปรเหล่านี้เข้ากับฟังก์ชั่น JavaScript อื่น ๆ ดังนี้

 var target = document.querySelector ('. shortlink'); การเลือกฟังก์ชั่น (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (elem); select.addRange (ช่วง);  

นอกจากนี้ก่อน, range.selectNodeContents (elem), กำหนด ช่วงของการเลือก ซึ่งในกรณีนี้คือองค์ประกอบที่ถูกอ้างถึงใน elem. บรรทัดสุดท้าย, select.addRange (ช่วง) ทำให้การเลือก จำกัด เฉพาะช่วงที่ระบุ.

ที่ดี! เราทุกคนพร้อมฟังก์ชั่น ลองนำไปใช้จริง.

เรียกใช้

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

 target.onclick = function () selection ('. shortlink__url'); ; 

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

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

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

คุณสามารถติดตามผ่านลิงค์ต่อไปนี้เพื่อดูตัวอย่างหรือดาวน์โหลดซอร์สโค้ด.

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