เมื่อใดที่จะปิดใช้งานการเลือกข้อความได้

การใช้ CSS ทำให้ผู้ใช้ไม่สามารถเลือกข้อความภายในองค์ประกอบโดยใช้ user-select: none. เป็นที่เข้าใจได้ว่าทำไมการทำเช่นนั้นจึงถูกมองว่าเป็น "การโต้เถียง" ฉันหมายถึง, น่า เรากำลังปิดการใช้งานพฤติกรรมผู้ใช้มาตรฐาน? โดยทั่วไปไม่ เราไม่ควรทำอย่างนั้น. แต่การปิดใช้งานการเลือกข้อความมีกรณีการใช้งานที่ถูกต้อง (แม้ว่าจะหายาก) หรือไม่ ฉันคิดอย่างนั้น.

ในบทความนี้ เราจะมาสำรวจกรณีการใช้งานเหล่านี้และดูว่าเราจะใช้งานอย่างไรได้บ้าง user-select: none เพื่อปรับปรุง (ไม่ขัดขวาง) ประสบการณ์ของผู้ใช้ นอกจากนี้ยังไม่มีค่าอะไรเลยที่ user-select ทรัพย์สินมีค่าอื่นนอกจาก none ที่สามารถใช้ปรับเปลี่ยนพฤติกรรมการเลือกข้อความแทนการปิดใช้งานโดยสิ้นเชิง และค่าอื่นที่สม่ำเสมอ บังคับใช้ การเลือกข้อความ ดังนั้นเราจะพิจารณาสิ่งเหล่านั้นด้วย

เป็นไปได้ user-select ค่า

มาเริ่มต้นสิ่งต่าง ๆ ด้วยการวิ่งผ่านสิ่งต่าง ๆ user-select ค่านิยมและสิ่งที่พวกเขาทำ

การประยุกต์ใช้ user-select: none; กับองค์ประกอบหมายความว่าเนื้อหาข้อความและเนื้อหาข้อความที่ซ้อนกันจะไม่สามารถเลือกได้หรือมองเห็นได้ (เช่น ::selection จะไม่ทำงาน) หากคุณต้องทำการเลือกที่มีเนื้อหาที่ไม่สามารถเลือกได้ เนื้อหาที่ไม่สามารถเลือกได้จะถูกละเว้นจากการเลือก ดังนั้นจึงมีการใช้งานค่อนข้างดี และการสนับสนุนนั้นยอดเยี่ยม

ในทางที่ผิด user-select: text ทำให้สามารถเลือกเนื้อหาได้ คุณจะใช้ค่านี้เพื่อเขียนทับ user-select: none.

user-select: contain เป็นเรื่องที่น่าสนใจ การใช้หมายความว่าหากการเลือกเริ่มต้นภายในองค์ประกอบ การเลือกนั้นจะต้องสิ้นสุดภายในองค์ประกอบนั้นด้วย สิ่งนี้ใช้ไม่ได้เมื่อการเลือกเริ่มต้นขึ้น ก่อน อย่างไรก็ตามองค์ประกอบซึ่งอาจเป็นสาเหตุที่ไม่มีเบราว์เซอร์รองรับในปัจจุบัน (Internet Explorer และ Microsoft Edge เวอร์ชันก่อนหน้าสนับสนุนภายใต้หน้ากากของ user-select: element.)

กับ user-select: allการเลือกส่วนหนึ่งของเนื้อหาขององค์ประกอบส่งผลให้องค์ประกอบทั้งหมดถูกเลือกโดยอัตโนมัติ ทั้งหมดหรือไม่มีเลย ซึ่งไม่ประนีประนอมแต่มีประโยชน์ในสถานการณ์ที่ผู้ใช้มักจะคัดลอกเนื้อหาไปยังคลิปบอร์ดของตน (เช่น การแชร์และการฝังลิงก์ ข้อมูลโค้ด ฯลฯ) แทนที่จะดับเบิลคลิก ผู้ใช้จะต้องคลิกเพียงครั้งเดียวเพื่อให้เลือกเนื้อหาโดยอัตโนมัติ

แต่โปรดใช้ความระมัดระวัง เนื่องจากนี่ไม่ใช่คุณลักษณะที่คุณคิดเสมอไป จะเกิดอะไรขึ้นหากผู้ใช้ต้องการเลือกเท่านั้น ส่วนหนึ่ง ของเนื้อหา (เช่น เฉพาะส่วนชื่อแบบอักษรของข้อมูลโค้ด Google Fonts หรือส่วนหนึ่งของข้อมูลโค้ด) ก็ยังดีกว่าที่จะจัดการ”คัดลอกไปที่คลิปบอร์ด” โดยใช้ JavaScript ในหลายสถานการณ์

แอปพลิเคชั่นที่ดีกว่าของ user-select: all คือเพื่อให้แน่ใจว่ามีการคัดลอกคำพูดทั้งหมดและถูกต้อง

พฤติกรรมของ user-select: auto (ค่าเริ่มต้นของ user-select) ขึ้นอยู่กับองค์ประกอบและวิธีการใช้งาน คุณสามารถหาข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ใน ปูมของเรา.

ตอนนี้เรามาสำรวจกรณีการใช้งานสำหรับ user-select: none...

การตัดข้อความที่ไม่ใช่ข้อความออกจากส่วนที่เลือก

เมื่อคุณคัดลอกเนื้อหาจากหน้าเว็บ อาจมาจากบทความหรือเนื้อหารูปแบบยาวประเภทอื่นๆ ใช่ไหม คุณอาจไม่ต้องการให้การเลือกของคุณรวมรูปภาพ อีโมจิ (ซึ่งบางครั้งสามารถคัดลอกเป็นข้อความได้ เช่น “:thinkingface:”) และสิ่งอื่น ๆ ที่คุณอาจคาดว่าจะพบใน <aside> องค์ประกอบ (เช่น คำกระตุ้นการตัดสินใจในบทความ โฆษณา หรืออย่างอื่นที่ไม่ได้เป็นส่วนหนึ่งของเนื้อหาหลัก)

เพื่อป้องกันไม่ให้มีบางสิ่งรวมอยู่ในการเลือก ตรวจสอบให้แน่ใจว่ามันถูกรวมไว้ในองค์ประกอบ HTML แล้วจึงนำไปใช้ user-select: none ไปที่มัน:

<p>lorem <span style="user-select: none">🤔</span> ipsum</p>

<aside style="user-select: none">
  <h1>Heading</h1>
  <p>Paragraph</p>
  <a>Call to action</a>
</aside>

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

ป้องกันการเลือกโดยไม่ได้ตั้งใจ

ใช้ user-select: none ไปยังลิงก์ที่ดูเหมือนปุ่ม (เช่น <a href="/th/whatever" class="button">Click Me!</a>).

ไม่สามารถเลือกเนื้อหาข้อความของ a <button> or <input type="submit"> เพราะดี ทำไมคุณถึง? อย่างไรก็ตาม ลักษณะการทำงานนี้ใช้ไม่ได้กับลิงก์ เนื่องจากโดยปกติแล้วจะเป็นส่วนหนึ่งของย่อหน้าที่ควรเลือกได้

พอใช้ได้

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

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

แน่นอนว่าการโต้ตอบที่ต้องใช้การลาก (โดยเจตนา) ก็มีอยู่เช่นกัน (เช่น ในเกมเบราว์เซอร์) แต่สิ่งเหล่านี้ไม่ใช่เรื่องปกติ ยังไงก็แสดงว่า user-select อันที่จริงมีกรณีการใช้งานค่อนข้างน้อย

หลีกเลี่ยงการขโมยเนื้อหาเพย์วอลล์

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

หากคุณต้องการลงเส้นทางนี้ มีหลายวิธีที่จะทำให้ผู้ใช้เลี่ยงผ่านเพย์วอลล์ได้ยากขึ้น (หรือในทำนองเดียวกัน คัดลอกเนื้อหาที่มีลิขสิทธิ์ เช่น งานที่เผยแพร่ของผู้อื่น)

เบลอเนื้อหาด้วย CSS:

article { filter: blur(<radius>); }

การปิดใช้งานแป้นพิมพ์ลัดสำหรับ DevTools:

document.addEventListener("keydown", function (e) {
  if (e.keyCode == 123) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 73) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 74) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 85) e.preventDefault();
});

ปิดการใช้งานการเข้าถึง DevTools ผ่านเมนูบริบทโดยปิดการใช้งานเมนูบริบทเอง:

document.addEventListener("contextmenu", e => e.preventDefault())

และแน่นอน เพื่อป้องกันไม่ให้ผู้ใช้คัดลอกเนื้อหาเมื่อไม่ได้รับอนุญาตให้อ่านที่ต้นทาง การสมัคร user-select: none:

<article style="user-select: none">

กรณีการใช้งานอื่น ๆ ?

นี่เป็นกรณีการใช้งานสามกรณีที่ฉันนึกถึงเพื่อป้องกันการเลือกข้อความ หลายคนคิดในใจของฉัน แต่ทั้งหมดดูเหมือนยืดเยื้อ แต่แล้วคุณล่ะ? คุณต้องปิดการใช้งานการเลือกข้อความในสิ่งใดหรือไม่? ฉันอยากรู้!