ฉันต้องการซ่อนเคอร์เซอร์เมื่อแสดงหน้าเว็บที่มีไว้เพื่อแสดงข้อมูลในโถงอาคาร ไม่จำเป็นต้องโต้ตอบเลย ฉันลองใช้คุณสมบัติเคอร์เซอร์และรูปภาพเคอร์เซอร์แบบโปร่งใส แต่ไม่สามารถใช้งานได้
มีใครรู้บ้างว่าสามารถทำได้? ฉันคิดว่านี่อาจเป็นภัยคุกคามด้านความปลอดภัยสำหรับผู้ใช้ที่ไม่สามารถรู้ได้ว่าเขากำลังคลิกที่ใดดังนั้นฉันจึงไม่ค่อยมองโลกในแง่ดี ... ขอบคุณ!
คำตอบ:
ด้วย CSS:
selector { cursor: none; }ตัวอย่าง:
<div class="nocursor">
Some stuff
</div>
<style type="text/css">
.nocursor { cursor:none; }
</style>ในการตั้งค่านี้ในองค์ประกอบใน Javascript คุณสามารถใช้styleคุณสมบัติ:
<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
document.getElementById('nocursor').style.cursor = 'none';
</script>หากคุณต้องการตั้งค่านี้บนร่างกายทั้งหมด:
<script type="text/javascript">
document.body.style.cursor = 'none';
</script>ตรวจสอบให้แน่ใจว่าคุณต้องการซ่อนเคอร์เซอร์จริงๆ มันสามารถสร้างความรำคาญให้กับผู้คนได้จริงๆ
1x1png โปร่งใส png หรือ png โปร่งใส 1%
document.body.style.cursor = 'auto'ดู
แม้ว่าcursor: noneโซลูชัน CSS จะเป็นวิธีแก้ปัญหาที่ง่ายและมั่นคงหากเป้าหมายที่แท้จริงของคุณคือการลบเคอร์เซอร์เริ่มต้นในขณะที่กำลังใช้งานเว็บแอปพลิเคชันของคุณหรือใช้การตีความการเคลื่อนเมาส์แบบดิบของคุณเอง (สำหรับเกม FPS เป็นต้น) คุณอาจ ต้องการพิจารณาใช้Pointer Lock APIแทน
คุณสามารถใช้requestPointerLockกับองค์ประกอบเพื่อลบเคอร์เซอร์และเปลี่ยนเส้นทางmousemoveเหตุการณ์ทั้งหมดไปยังองค์ประกอบนั้น (ซึ่งคุณจะจัดการหรือไม่ก็ได้):
document.body.requestPointerLock();ในการปลดล็อกคุณสามารถใช้exitPointerLock :
document.exitPointerLock();ไม่มีเคอร์เซอร์จริง
นี่คือการเรียก API ที่มีประสิทธิภาพมาก ไม่เพียง แต่ทำให้เคอร์เซอร์ของคุณมองไม่เห็น แต่ยังลบเคอร์เซอร์ดั้งเดิมของระบบปฏิบัติการของคุณด้วย คุณจะไม่สามารถเลือกข้อความหรือทำอะไรก็ได้ด้วยเมาส์ของคุณ (ยกเว้นฟังเหตุการณ์ของเมาส์บางอย่างในโค้ดของคุณ) จนกว่าจะปลดล็อคตัวชี้ (โดยใช้exitPointerLockหรือกดESCในบางเบราว์เซอร์)
นั่นคือคุณไม่สามารถออกจากหน้าต่างพร้อมกับเคอร์เซอร์ของคุณเพื่อให้มันแสดงอีกครั้งเนื่องจากไม่มีเคอร์เซอร์
ข้อ จำกัด
ดังที่ได้กล่าวไว้ข้างต้นนี่เป็นการเรียก API ที่มีประสิทธิภาพมากดังนั้นจึงได้รับอนุญาตให้ตอบสนองต่อการโต้ตอบกับผู้ใช้โดยตรงบนเว็บเช่นการคลิก ตัวอย่างเช่น:
document.addEventListener("click", function () {
document.body.requestPointerLock();
});นอกจากนี้requestPointerLockจะไม่ทำงานจากแซนด์บ็อกซ์iframeเว้นแต่จะallow-pointer-lockได้รับอนุญาต
การแจ้งเตือนผู้ใช้
เบราว์เซอร์บางตัวจะแจ้งให้ผู้ใช้ยืนยันก่อนที่จะทำการล็อคบางส่วนจะแสดงข้อความ ซึ่งหมายความว่าการล็อกตัวชี้อาจไม่เปิดใช้งานทันทีหลังการโทร อย่างไรก็ตามการเปิดใช้งานการล็อกตัวชี้ที่แท้จริงสามารถฟังได้โดยการฟังpointerchangeเหตุการณ์ในองค์ประกอบที่requestPointerLockถูกเรียก:
document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});เบราว์เซอร์ส่วนใหญ่จะแสดงข้อความเพียงครั้งเดียว แต่ในบางครั้ง Firefox จะส่งข้อความสแปมในทุกๆการโทร AFAIK นี้เท่านั้นที่สามารถทำงานรอบโดยใช้การตั้งค่าดูการแจ้งเตือนตัวชี้ล็อคปิดการใช้งานใน Firefox
ฟังการเคลื่อนไหวของเมาส์ดิบ
Pointer Lock API ไม่เพียง แต่ลบเมาส์เท่านั้น แต่ยังเปลี่ยนเส้นทางข้อมูลการเคลื่อนไหวของเมาส์ดิบไปยังองค์ประกอบที่requestPointerLockเรียกใช้แทน สิ่งนี้สามารถฟังได้ง่ายๆโดยใช้mousemoveเหตุการณ์จากนั้นเข้าถึงmovementXและmovementYคุณสมบัติบนวัตถุเหตุการณ์:
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});ฉันทำด้วย * .cur 1px ถึง 1px แบบโปร่งใส แต่ดูเหมือนจุดเล็ก ๆ :( ฉันคิดว่ามันเป็นสิ่งที่ข้ามเบราว์เซอร์ที่ดีที่สุดที่ฉันทำได้ CSS2.1 ไม่มีค่า 'none' สำหรับคุณสมบัติ 'cursor' - มันถูกเพิ่มใน CSS3 นั่นเป็นเหตุผลว่าทำไมมันจึงใช้งานไม่ได้ทุกที่
หากคุณต้องการทำใน CSS:
#ID { cursor: none !important; }!importantโดยทั่วไปคุณควรหลีกเลี่ยง
สำหรับเอกสาร html ทั้งหมดให้ลองทำเช่นนี้
html * {cursor:none}หรือถ้า css บางตัวเขียนทับเคอร์เซอร์ของคุณ: none use! important
html * {cursor:none!important}หากคุณต้องการซ่อนเคอร์เซอร์ในหน้าเว็บทั้งหมดการใช้bodyจะไม่ได้ผลเว้นแต่จะครอบคลุมทั้งหน้าที่มองเห็นซึ่งไม่ได้เป็นเช่นนั้นเสมอไป เพื่อให้แน่ใจว่าเคอร์เซอร์ซ่อนอยู่ทุกที่ในหน้าให้ใช้:
document.documentElement.style.cursor = 'none';ในการเปิดใช้งานอีกครั้ง:
document.documentElement.style.cursor = 'auto';อะนาล็อกกับสัญกรณ์ CSS คงอยู่ในคำตอบโดยพาเวล Salaquarda (ในสาระสำคัญ: html * {cursor:none})