Hiding the mouse cursor when idle using JavaScript

Is it possible to use JavaScript to set the cursor attribute to the property none if the mouse is inactive for a certain amount of time (say, five seconds) and set it back to auto when it becomes active again?

EDIT: I realize that none is not a valid value for the cursor property. Nonetheless, many web-browsers seem to support it. Furthermore, the primary user for this is myself, so there is little chance of confusion arising as a result.

I've got two scripts that can do something similar:

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

and

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

With each of these, when the mouse is inactive for more than five seconds the background color turns white, and when the cursor is moved the background turns black. However, they don't work for making the cursor disappear. What surprises me is that if I put the command document.querySelector("body").style.cursor = "none"; into the JavaScript console it works perfectly. Inside the scripts, it does not seem to work.

I've posted the above scripts as this is as far as I have come in getting this to work. I'm not necessarily asking for a fix for either of the scripts; if you know of a more efficient way of hiding the cursor, please share.

In CSS 2 none is not a valid value for the cursor property. It is valid in CSS 3, however.

Otherwise you might be able to use a custom cursor loaded from a URI that is simply transparent.

I would consider this to be highly distracting for the user, though, so I wouldn't advise you to actually do that.

The following works for me in Firefox 3.6.13 so long as the cursor is over an actual element that doesn't have a non-default cursor (so it doesn't work if the cursor is over a form element or link, for example), although in general I recommend against doing this, because it is non-standard and extremely poor usability.

Aside: It's more compatible not to use querySelector() when there's an alternative, such as document.body or 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);
    };
})();

This worked for me (taken from https://gist.github.com/josephwegner/1228975).

Note reference to an html element with id wrapper.

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

In my kiosk apps, to make sure no "pressed" characters are lost on a move out of screen-saver (they are usually sent to the PC via a bar code scanner or rfid reader) and to ensure the screen comes back on instantly, I use the following bits of code, along with a transparent cur cursor file, and disable all the screen saving/power saving options in the host OS. This works in Chrome 12, and probably many other browsers. I don't think there is any Chrome-specific code-- it's just the easiest thing to auto-launch into a kiosk-mode.

The sloppy bits iterating through the INPUT elements are needed because those form parts will keep their default (typically white) background.

If you use images, or colored text, or other such objects, you'll need to figure out how to deal with those. I'm just building data acquisition apps, so it's just black text up there on the screen. Turning the page background black makes the whole screen black, and prevents burn in.

This could and should be done by applying various CSS bits via JS, but it works, well, and it's all in one spot in the code, so it's easy to paste around, say, to a place like this.

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

onkeydown fires unSS is in the body so that every time a key press is seen it will reset the timer.

<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.
    }
...

There is a jquery plugin idletimer that checks if a user is inactive or not.

If anyone still looking for answer in 2019 (as did I), this approach works on FF 71 and 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>

It's simple and clear. This version uses DEMO.hideMouse() to start hiding mouse and DEMO.showMouse() to cancel the event. Change #game to div of your choice ...

It's more clear to work with on and off switch and named functions instead of lambdas.

I know that OP didn't specify that answers using JQuery are expected, but in my experience: I am always happy to see different approaches to learn from.

来源：https://stackoverflow.com/questions/3354239/hiding-the-mouse-cursor-when-idle-using-javascript

标签

javascript

css

cursor

mousemove