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

Question

是否可以使用 JavaScript 将 cursor 属性设置为属性 none 如果鼠标处于非活动状态一段时间（例如，五秒）并在它变为时将其设置回 auto又激活了？

编辑：我意识到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 控制台，它会完美运行。在脚本内部，它似乎不起作用。

我已经发布了上面的脚本，因为这是我已经开始让它工作了。我不一定要求修复任何一个脚本。如果您知道隐藏光标的更有效方法，请分享。

Answer 1

在 CSS 2 中，none 不是 cursor property 的有效值。但是，它在 CSS 3 中有效。

否则，您也许可以使用从简单透明的 URI 加载的自定义光标。

不过，我认为这会极大地分散用户的注意力，因此我不建议您实际这样做。

Answer 2

以下内容在 Firefox 3.6.13 中适用于我，只要光标位于没有非默认光标的实际元素上（因此，如果光标位于表单元素或链接上，则它不起作用，例如），尽管总的来说我建议不要这样做，因为它是非标准的并且可用性极差。

另外：当有替代品时，不使用querySelector() 更兼容，例如document.body 或document.getElementById()。

(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);
    };
})();

Answer 3

这对我有用（取自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);
            }
    });
});

Answer 4

如果有人在 2019 年仍在寻找答案（就像我一样），这种方法适用于 FF 71 和 Chrome 78：

var DEMO = {
  INI: {
    MOUSE_IDLE: 3000
  },
  hideMouse: function() {
    $("#game").css('cursor', 'none');
    $("#game").on("mousemove", DEMO.waitThenHideMouse);
  },
  waitThenHideMouse: function() {
    $("#game").css('cursor', 'default');
    $("#game").off("mousemove", DEMO.waitThenHideMouse);
    setTimeout(DEMO.hideMouse, DEMO.INI.MOUSE_IDLE);
  },
  showMouse: function() {
    $("#game").off("mousemove", DEMO.waitThenHideMouse);
    $("#game").css('cursor', 'default');
  },
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

简单明了。这个版本使用DEMO.hideMouse()开始隐藏鼠标，DEMO.showMouse()取消事件。将 #game 更改为您选择的 div ...

使用 on 和 off 开关和命名函数而不是 lambda 会更清晰。

我知道 OP 没有指定使用 JQuery 的答案是预期的，但根据我的经验：我总是很高兴看到不同的学习方法。

Answer 5

在我的自助服务终端应用程序中，确保在移出屏幕保护程序时不会丢失“按下”字符（它们通常通过条形码扫描仪或 rfid 阅读器发送到 PC）并确保屏幕返回在立即上，我使用以下代码以及透明的cur 光标文件，并禁用主机操作系统中的所有屏幕保护/省电选项。这适用于 Chrome 12，可能还有许多其他浏览器。我不认为有任何特定于 Chrome 的代码——它只是自动启动到 kiosk 模式的最简单的事情。

需要遍历 INPUT 元素的草率位，因为这些表单部分将保持其默认（通常为白色）背景。

如果您使用图像、彩色文本或其他此类对象，您需要弄清楚如何处理这些对象。我只是在构建数据采集应用程序，所以它只是屏幕上的黑色文本。将页面背景设置为黑色会使整个屏幕变黑，并防止烧屏。

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

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

onkeydown 触发 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.
    }
...

Answer 6

有一个 jquery 插件idletimer 可以检查用户是否处于非活动状态。

Answer 7

我找到了一个解决间歇性无光标问题的简单解决方法，就是创建一个透明的<div id="overlay"> </div> 作为页面上的最后一个元素，并将 css 样式属性设置为：

#overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: transparent;
  cursor: none;
  margin: 0;
  padding: 0;
  border: 0;
}

使 javascript 将可见性更改为“可见”或“隐藏”。 “可见”层将隐藏光标。隐藏层反之亦然。