Question

如果鼠标在一段时间内（例如，五秒钟）处于非活动状态并将其设置回{{}，则可以使用JavaScript将cursor属性设置为属性none 1}}当它再次变为活动状态时？

编辑：我意识到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; } };放入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

在我的自助服务终端应用程序中，确保在移出屏幕保护程序时不会丢失“按下”字符（它们通常通过条形码扫描仪或rfid阅读器发送到PC）并确保屏幕恢复在即时上，我使用以下代码，以及透明的光标文件，并禁用主机操作系统中的所有屏幕保存/省电选项。这适用于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.
    }
...

Answer 4

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

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

Answer 6

如果仍然有人在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 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将可见性更改为“可见”或“隐藏”。 “可见”层将隐藏光标。反之亦然。

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

7 个答案: