CSS 또는 Javascript를 사용하여 웹 페이지에서 커서를 숨길 수 있습니까?
건물 홀에 정보를 표시하는 웹 페이지를 표시 할 때 커서를 숨기고 싶습니다. 대화식 일 필요는 없습니다. 커서 속성과 투명한 커서 이미지로 시도했지만 작동시키지 않았습니다.
이것이 가능한지 아는 사람이 있습니까? 나는 이것이 그가 클릭하는 위치를 알 수없는 사용자에게 보안 위협으로 생각 될 수 있다고 생각합니다. 그래서 나는 매우 낙관적이지 않습니다 ... 감사합니다!
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>
그래도 커서를 숨기고 있는지 확인하십시오. 정말 사람들을 귀찮게 할 수 있습니다 .
포인터 잠금 API
그동안 cursor: noneCSS의 솔루션은 견고하고 쉽게 확실히 해결 방법은 실제 목표하는 경우, 제거 웹 응용 프로그램을 사용하는 동안 기본 커서를하거나 구현 고유의 원시 마우스 움직임의 해석 (예를 들어 FPS 게임을위한), 당신은 수도 대신 Pointer Lock API 사용을 고려하고 싶습니다 .
요소에서 requestPointerLock 을 사용 하여 커서를 제거하고 모든 mousemove이벤트를 해당 요소로 리디렉션 할 수 있습니다 (처리하거나 처리하지 않을 수 있음).
document.body.requestPointerLock();
잠금을 해제하려면 exitPointerLock 을 사용할 수 있습니다 .
document.exitPointerLock();
추가 사항
커서가 없습니다.
이것은 매우 강력한 API 호출입니다. 커서를 보이지 않게 할 뿐만 아니라 실제로 운영 체제의 기본 커서를 제거합니다 . 포인터 잠금이 해제 될 때까지 ( 일부 브라우저에서 사용 하거나 눌러 ) 텍스트를 선택하거나 마우스로 무언가 를 수행 할 수 없습니다 (코드에서 일부 마우스 이벤트를 듣지 않는 경우 ).exitPointerLockESC
즉, 커서가 없으므로 커서가있는 창을 다시 표시 할 수 없습니다.
제한 사항
위에서 언급했듯이 이것은 매우 강력한 API 호출이므로 클릭과 같은 웹에서의 직접적인 사용자 상호 작용에 대한 응답으로 만 허용됩니다. 예를 들면 다음과 같습니다.
document.addEventListener("click", function () {
document.body.requestPointerLock();
});
또한 권한이 설정되어 있지 않으면 requestPointerLock샌드 박스에서 작동하지 않습니다 .iframeallow-pointer-lock
사용자 알림
일부 브라우저는 잠금이 설정되기 전에 사용자에게 확인 메시지를 표시하고 일부는 단순히 메시지를 표시합니다. 이것은 호출 직후 포인터 잠금이 활성화되지 않을 수 있음을 의미합니다. 그러나 호출 된 pointerchange요소에서 이벤트를 수신하면 포인터 잠금의 실제 활성화를들을 수 있습니다 requestPointerLock.
document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});
대부분의 브라우저는 메시지를 한 번만 표시하지만 Firefox는 매번 호출 할 때마다 메시지를 스팸으로 표시합니다. AFAIK는 사용자 설정으로 만 해결할 수 있습니다 . Firefox에서 포인터 잠금 알림 비활성화를 참조하십시오 .
생 마우스 움직임 듣기
The Pointer Lock API not only removes the mouse, but instead redirects raw mouse movement data to the element requestPointerLock was called on. This can be listened to simply by using the mousemove event, then accessing the movementX and movementY properties on the event object:
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});
I did it with transparent *.cur 1px to 1px, but it looks like small dot. :( I think it's the best cross-browser thing that I can do. CSS2.1 has no value 'none' for 'cursor' property - it was added in CSS3. Thats why it's workable not everywhere.
If you want to do it in CSS:
#ID { cursor: none !important; }
For whole html document try this
html * {cursor:none}
Or if some css overwrite your cursor: none use !important
html * {cursor:none!important}
'Programing' 카테고리의 다른 글
| 현재 ASP.NET 세션이 null 인 경우 어떻게해야합니까? (0) | 2020.07.17 |
|---|---|
| Java Spring Boot : 앱 루트 (“/”)를 index.html에 매핑하는 방법은 무엇입니까? (0) | 2020.07.17 |
| 쿠키를 서버 측에서 삭제하는 올바른 방법 (0) | 2020.07.17 |
| 현재로드 된 어셈블리를 어떻게 반복합니까? (0) | 2020.07.17 |
| 이름을 모르는 경우 Javascript 객체의 속성에 어떻게 액세스합니까? (0) | 2020.07.17 |