13

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

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

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

4

7 回答 7

14

在 CSS 2中，该属性none的值无效。但是，它在 CSS 3 中有效。cursor

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

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

于 2010-07-28T15:09:19.927 回答
9

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

旁白：当有替代品时不使用它更兼容querySelector()，例如document.bodyor 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);
    };
})();
于 2010-12-19T14:32:55.720 回答
2

这对我有用（取自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-25T22:48:04.897 回答
2

如果有人在 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 的答案是预期的，但根据我的经验：我总是很高兴看到不同的学习方法。

于 2019-10-29T10:10:23.513 回答
1

在我的信息亭应用程序中，为了确保在退出屏幕保护程序时不会丢失“按下”字符（它们通常通过条形码扫描仪或 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.
    }
...
于 2011-07-20T04:28:23.987 回答
0

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

于 2010-12-23T16:43:07.243 回答
0

我找到了一个解决间歇性无光标问题的简单解决方法，即创建一个透明<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 将可见性更改为“可见”或“隐藏”。“可见”层将隐藏光标。反之亦然，隐藏层。

于 2019-11-27T14:45:53.500 回答