Скрытие курсора мыши во время простоя с использованием JavaScript - PullRequest
Новая
       24

Скрытие курсора мыши во время простоя с использованием JavaScript

8 голосов
/ 28 июля 2010

Можно ли использовать 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;
    }
};

Для каждого из них, когда мышь неактивна более пяти секунд, цвет фона становится белым, а при перемещении курсора фон становится черным. Однако они не работают, чтобы заставить курсор исчезнуть. Что меня удивляет, так это то, что если я введу команду document.querySelector("body").style.cursor = "none"; в консоль JavaScript, она будет работать отлично. Внутри скриптов это не похоже на работу.

Я опубликовал вышеупомянутые сценарии, поскольку дошел до того, чтобы заставить это работать. Я не обязательно прошу исправить ни один из сценариев; если вам известен более эффективный способ скрыть курсор, поделитесь.

Ответы [ 5 ]

14 голосов
/ 28 июля 2010

В CSS 2 none недопустимое значение для свойства cursor . Это действительно в CSS 3, однако.

В противном случае вы можете использовать пользовательский курсор, загруженный из прозрачного URI.

Я бы посчитал, что это сильно отвлекает пользователя, поэтому я бы не советовал вам это делать.

6 голосов
/ 19 декабря 2010

Следующее работает для меня в 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);
    };
})();
1 голос
/ 26 октября 2013

Это сработало для меня (взято из https://gist.github.com/josephwegner/1228975).

Примечание: ссылка на элемент 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);
            }
    });
});
1 голос
/ 20 июля 2011

В моих приложениях-киосках, чтобы убедиться, что «потерянные» символы не теряются при выходе из экранной заставки (они обычно отправляются на ПК через сканер штрих-кода или RFID-ридер) и чтобы экран возвращалсяна мгновенно я использую следующие биты кода вместе с прозрачным файлом курсора и отключаю все опции сохранения / энергосбережения экрана в хост-ОС.Это работает в Chrome 12 и, возможно, во многих других браузерах.Я не думаю, что есть какой-либо специфичный для Chrome код - это просто самая простая вещь для автоматического запуска в режиме киоска.

Небрежные биты, повторяющие элементы INPUT, необходимы, потому что эти части формыоставьте их по умолчанию (обычно белый) фон.

Если вы используете изображения, цветной текст или другие подобные объекты, вам необходимо выяснить, как с ними обращаться.Я просто создаю приложения для сбора данных, поэтому на экране просто черный текст.Превращение черного цвета фона страницы делает весь экран черным и предотвращает прожиг.

Это можно и нужно сделать, применяя различные биты CSS через JS, но это работает, ну, и все это в одном месте вкод, так что его легко вставить, скажем, в такое место. 

<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.
    }
...
0 голосов
/ 23 декабря 2010

Существует плагин jquery idletimer , который проверяет, неактивен ли пользователь.

...