空闲时使用JavaScript隐藏鼠标光标

如果鼠标在一段时间内不活动（例如5秒），并且将其设置回auto，是否可以使用JavaScript将cursor属性设置为属性none它又变得活跃了？空闲时使用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; 
    } 
};

对于每一项，当鼠标处于非活动状态超过五秒钟背景色变白色，当光标移动时，背景变黑。但是，它们不能使光标消失。令我惊讶的是，如果我把命令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 2010-07-28 15:41:40

如果在播放某些媒体或者不想使用鼠标进行交互，我可以看到这样做的一些价值 – hunter 2010-12-22 20:36:27

即使某些东西不打算与鼠标互动，还有什么替代方法？触摸？钢笔？无论如何，它们都会隐藏正常的鼠标指针，并且只要您知道所点击的位置就会将其替换为淡化的内容。对于媒体播放器来说，这可能是有争议的，但我猜想只要浏览器将增加视频的全屏功能，这也不会成为问题。通常有*非常少的*有效的理由永远隐藏鼠标指针，特别是如果它只是屏幕的一部分（比如说，你的网页或者它的一个元素）。 – Joey 2010-12-23 21:41:44

在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 =“”;'来允许它在任何元素上工作。 – 2017-01-28 02:11:39

有一个jquery插件idletimer来检查，如果用户是不活动的或没有。

来源

2010-12-23 16:43:07 Codler

在我的自助服务终端应用程序中，为了确保在移出屏幕保护程序（通常通过条形码扫描仪或rfid阅读程序将其发送到PC）时不会丢失“已按下”字符，并确保屏幕显示回到瞬间，我用以下位的代码，用透明CUR光标文件一起，并禁用在主机操作系统所有的屏幕省电/省电选项。这适用于Chrome 12以及其他许多浏览器。我不认为有特定Chrome的代码 - 它只是最容易的事情，以自动启动进入亭模式。

通过INPUT元件迭代稀松比特被需要的，因为这些形式的部分将保持它们的默认（通常是白色）的背景。

如果您使用图像或彩色文本或其他此类对象，则需要弄清楚如何处理这些对象。我只是建立数据采集应用程序，因此屏幕上只有黑色的文字。将页面背景变成黑色会使整个屏幕变黑，并防止烧入。

这可以并且应该通过JS应用各种CSS位来完成，但它工作得很好，而且它全部位于代码中的一个位置，所以很容易粘贴到像这样的地方。

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

onkeydown fires 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

不错，我用这个效果很好。我用'body'替换了'＃wrapper'，这样我就可以将鼠标放在页面的任何位置。此外，Chrome每秒都会触发鼠标移动并触发鼠标移动 - 为了避免这种情况发生，我每次都存储鼠标坐标，然后立即在mousemove部分内比较ev.clientX/Y与存储的值。 – IBam 2014-12-10 10:44:38

空闲时使用JavaScript隐藏鼠标光标

回答

相关问题