JavaScript를 사용하여 유휴 상태 일 때 마우스 커서가 보이지 않게하기

마우스가 일정 시간 (예 : 5 초) 동안 비활성 상태 인 경우 JavaScript를 사용하여 속성에 cursor 속성을 설정하고 으로 다시 설정할 수 있습니까? 다시 활성화됩니까?JavaScript를 사용하여 유휴 상태 일 때 마우스 커서가 보이지 않게하기

편집 :none은 cursor 속성에 유효한 값이 아닙니다. 그럼에도 불구하고 많은 웹 브라우저가이를 지원하는 것 같습니다. 또한이 일차 사용자는 나 자신이므로 혼란이 발생할 가능성은 거의 없습니다.

나는 비슷한 일을 할 수있는 두 개의 스크립트를 가지고 :

window.addEventListener("mousemove", 
    function(){ 
     document.querySelector("#editor").style.background = "#000"; 
     setTimeout("document.querySelector('#editor').style.background = '#fff'", 5000); 
    } 
, true);

이들의 각각

var timeout; 
var isHidden = false; 

document.addEventListener("mousemove", magicMouse); 

function magicMouse() { 
    if (timeout) { 
     clearTimeout(timeout); 
    } 
    timeout = setTimeout(function() { 
     if (!isHidden) { 
      document.querySelector("body").style.cursor = "none"; 
      document.querySelector("#editor").style.background = "#fff"; 
      isHidden = true; 
     } 
    }, 5000); 
    if (isHidden) { 
     document.querySelector("body").style.cursor = "auto"; 
     document.querySelector("#editor").style.background = "#000"; 
     isHidden = false; 
    } 
};

, 마우스가 5 초 이상 배경색 턴 동안 비활성 흰색이되고 커서를 움직이면 배경이 검게 변합니다. 그러나 커서를 없애기 위해 작동하지 않습니다. 깜짝 놀라는 점은 내가 document.querySelector("body").style.cursor = "none"; 명령을 JavaScript 콘솔에 넣으면 완벽하게 작동한다는 것입니다. 스크립트 안에서는 작동하지 않는 것 같습니다.

위의 스크립트를 게시했습니다. 지금까지이 스크립트를 사용하기 위해서입니다. 나는 반드시 스크립트 중 하나에 대한 수정을 요구하지는 않습니다. 커서를 숨기는 더 효율적인 방법을 알고 있다면 공유하십시오.

출처

2010-07-28 木川炎星

CSS 2 none은 cursor property에 대해 유효한 값이 아닙니다. 그러나 CSS 3에서는 유효합니다.

그렇지 않으면 단순히 투명한 URI에서로드 된 사용자 정의 커서를 사용할 수 있습니다.

나는 이것이 사용자를 위해 매우 혼란 스럽다고 생각하지만 실제로 그렇게 할 것을 권하지는 않습니다.

출처

2010-07-28 15:09:19 Joey

+1 사용자에게 이와 같은 것을 혼동하는 것은 좋지 않습니다. – peol

일부 미디어가 재생 중이거나 마우스를 사용하여 상호 작용하지 않을 경우이 작업을 수행함에있어 약간의 가치가 있음을 알 수 있습니다. – hunter

뭔가가 마우스와 상호 작용하지 않기 위해 사용되는 경우에도 대체 방법은 무엇입니까? 접촉? 펜? 둘 다 일반 마우스 포인터를 숨기고 어디로 치 었는지 즉시 알 수있는 것처럼 사라지게합니다. 미디어 플레이어에게는 논쟁의 여지가 있지만, 브라우저가 비디오 용 전체 화면 기능을 성장 시키면 문제가되지 않을 것입니다. 일반적으로 마우스 포인터를 숨길 수있는 유효한 이유는 매우 드뭅니다. 특히 화면의 일부 (예 : 웹 페이지 또는 요소)에 불과합니다. – Joey

다음은 Firefox 3.6.13에서 기본이 아닌 커서가없는 실제 요소 위에 커서가 있으면 (커서가 양식 요소 위에 있거나 커서가 폼 요소 위에 있지 않으면 작동하지 않습니다. 링크), 일반적으로 나는 비표준적이고 매우 좋지 않은 사용성이기 때문에 이렇게하는 것에 반대한다.

제외 : document.body 또는 document.getElementById()과 같은 대체 값이있는 경우 querySelector()을 사용하지 않는 것이 더 적합합니다.

(function() { 
    var mouseTimer = null, cursorVisible = true; 

    function disappearCursor() { 
     mouseTimer = null; 
     document.body.style.cursor = "none"; 
     cursorVisible = false; 
    } 

    document.onmousemove = function() { 
     if (mouseTimer) { 
      window.clearTimeout(mouseTimer); 
     } 
     if (!cursorVisible) { 
      document.body.style.cursor = "default"; 
      cursorVisible = true; 
     } 
     mouseTimer = window.setTimeout(disappearCursor, 5000); 
    }; 
})();

출처

2010-12-19 14:32:55

'document.body.style.cursor = "";'를 사용하면 모든 요소에서 작동하도록 할 수 있습니다. –

사용자가 비활성 상태인지 확인하는 jquery 플러그인 idletimer이 있습니다.

출처

2010-12-23 16:43:07 Codler

내 키오스크 앱에서는 화면 보호기가없는 곳에서 이동 중에 "눌린"문자가 손실되지 않도록합니다 (일반적으로 바코드 스캐너 또는 rfid 리더를 통해 PC로 전송됩니다). 화면이 보이게하려면 즉시에 투명 커서 커서 파일과 함께 다음 비트의 코드를 사용하고 호스트 OS에서 모든 화면 저장/절전 옵션을 비활성화합니다. 이것은 Chrome 12 및 다른 많은 브라우저에서 작동합니다. Chrome 관련 코드가 있다고 생각하지 않습니다. 키오스크 모드로 자동 실행하는 것이 가장 쉬운 방법입니다.

INPUT 요소를 반복하는 부적절한 비트가 필요합니다. 양식 부분이 기본 (일반적으로 흰색) 배경을 유지하기 때문입니다.

이미지, 색칠 된 텍스트 또는 기타 이와 유사한 객체를 사용하는 경우이를 처리하는 방법을 알아야합니다. 데이터 수집 애플리케이션을 구축하는 중이므로 화면에 검은 색 텍스트 만 표시됩니다. 페이지 배경을 검은 색으로 바꾸면 전체 화면이 검은 색이되고 번인을 방지 할 수 있습니다.

JS를 통해 다양한 CSS 비트를 적용하여이 작업을 수행 할 수 있고 수행해야 할 수 있지만 코드에서 한 지점에 모두 있습니다. 이런 식으로 붙여 넣기는 쉽습니다.

<body onkeydown="unSS();" id="thePage">

onkeydown fire unSS가 본체에 있으므로 키를 누를 때마다 타이머가 재설정됩니다.

<script type="text/javascript"> 

var ScreenSaver = 10; // minutes 

SS(); // start the timer up 

function unSS() 
{ 
    document.getElementById('thePage').style.background='White'; 
    for (var i = 0; i < document.getElementsByTagName('INPUT').length; i++) 
     { 
      document.getElementsByTagName('INPUT')[i].style.background='White'; 
     } 

    //put the cursor back. 
    document.getElementById('thePage').style.cursor = 'default'; 

    ScreenSaver=10; 
} 

function SS() 
{ 
    ScreenSaver = ScreenSaver-1; //decrement. sorry for the vb-style. get over it. 

    if (ScreenSaver<=0) 
     { 
      document.getElementById('thePage').style.background='Black'; 
      for (var i = 0; i < document.getElementsByTagName('INPUT').length; i++) 
       { 
        document.getElementsByTagName('INPUT')[i].style.background='Black'; 
       } 
       //change the cursor to a transparent cursor. 
       //you can find the file on the web. 
       //Search for "transparent cursor cur download" 
       document.getElementById('thePage').style.cursor = 'url(transparentCursor.cur)'; 
     } 

    setTimeout("SS();",60000); // fire the thing again in one minute. 
    } 
...

출처

2011-07-20 04:28:23 Jeremy

이것은 나를 위해 일했습니다 (https://gist.github.com/josephwegner/1228975에서 가져옴).

id 래퍼가있는 html 요소에 대한 참고입니다.

//Requires jQuery - http://code.jquery.com/jquery-1.6.4.min.js 
$(document).ready(function() { 


    var idleMouseTimer; 
    var forceMouseHide = false; 

    $("body").css('cursor', 'none'); 

    $("#wrapper").mousemove(function(ev) { 
      if(!forceMouseHide) { 
        $("body").css('cursor', ''); 

        clearTimeout(idleMouseTimer); 

        idleMouseTimer = setTimeout(function() { 
          $("body").css('cursor', 'none'); 

          forceMouseHide = true; 
          setTimeout(function() { 
            forceMouseHide = false; 
          }, 200); 
        }, 1000); 
      } 
    }); 
});

출처

2013-10-25 22:48:04 cby016

좋았어, 나는 이것을 아주 효과적으로 사용했다. 나는'# wrapper'를'body'로 대체 했으므로 마우스를 페이지의 아무 곳이나두면됩니다. 또한 크롬은 오작동하고 매초마다 mousemove를 트리거합니다. 매번 마우스 코즈를 저장 한 다음 mousemove 섹션에서 즉시 ev.clientX/Y를 저장된 값과 비교합니다. – IBam

JavaScript를 사용하여 유휴 상태 일 때 마우스 커서가 보이지 않게하기

답변

관련 문제