Nascondere il cursore del mouse quando inattivo utilizzando JavaScript

Question

È possibile utilizzare JavaScript per impostare l'attributo cursor nella proprietà none se il mouse è inattivo per un certo periodo di tempo (ad esempio, cinque secondi) e reimpostarlo su auto quando diventa di nuovo attivo?

EDIT: mi rendo conto che none non è un valore valido per la proprietà cursor. Nondimeno, molti browser Web sembrano supportarlo. Inoltre, l'utente principale per questo è me stesso, quindi ci sono poche possibilità che sorga confusione come risultato.

Ho due script in grado di fare qualcosa di simile:

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

e

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

con ognuno di questi, quando il mouse è inattivo per più di cinque secondi i giri colore di sfondo bianco, e quando si sposta il cursore lo sfondo diventa nero. Tuttavia, non funzionano per far sparire il cursore. Ciò che mi sorprende è che se metto il comando document.querySelector("body").style.cursor = "none"; nella console JavaScript funziona perfettamente. All'interno degli script, non sembra funzionare.

Ho postato gli script di cui sopra in quanto questo è il modo in cui sono arrivato a farlo funzionare. Non sto necessariamente chiedendo una correzione per nessuno degli script; se conosci un modo più efficiente di nascondere il cursore, per favore condividi.

Answer 1

Nei CSS 2 none non è un valore valido per cursor property. È comunque valido nel CSS 3.

Altrimenti potresti essere in grado di utilizzare un cursore personalizzato caricato da un URI che è semplicemente trasparente.

Considererei questo molto distratto per l'utente, quindi, quindi non ti consiglierei di farlo davvero.

Answer 2

I seguenti lavori per me in Firefox 3.6.13 finchè il cursore si trova su un elemento reale che non ha un cursore non predefinito (quindi non funziona se il cursore si trova sopra un elemento del modulo o link, ad esempio), anche se in generale raccomando di non farlo, perché è un'usabilità non standard ed estremamente scarsa.

A parte: È più compatibile non utilizzare querySelector() quando è disponibile un'alternativa, ad esempio document.body o 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

V'è un plugin jQuery idletimer che controlla se un utente è inattivo o meno.

Answer 4

Nelle app del mio chiosco, per assicurarmi che nessun personaggio "premuto" venga perso su una mossa dal salvaschermo (di solito viene inviato al PC tramite un lettore di codici a barre o lettore rfid) e per garantire che lo schermo venga di nuovo su all'istante, utilizzo i seguenti bit di codice, insieme a un file di cursore cur trasparente, e disabilitano tutte le opzioni di risparmio energetico/risparmio energetico nel sistema operativo host. Funziona su Chrome 12 e probabilmente su molti altri browser. Non penso che esista un codice specifico per Chrome: è solo la cosa più semplice da avviare automaticamente in modalità kiosk.

I bit di trascinamento che passano attraverso gli elementi di INPUT sono necessari perché quelle parti di modulo manterranno lo sfondo predefinito (in genere bianco).

Se si utilizzano immagini, o testo colorato o altri oggetti simili, è necessario capire come gestirli. Sto solo costruendo app di acquisizione dati, quindi è solo testo nero lassù sullo schermo. Girare lo sfondo della pagina nero rende tutto lo schermo nero e impedisce di bruciare.

Questo potrebbe e dovrebbe essere fatto applicando vari bit CSS tramite JS, ma funziona, bene, ed è tutto in un punto nel codice, quindi è facile incollare, per esempio, in un posto come questo.

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

gli accensioni in corso si accendono nel corpo in modo che ogni volta che viene visualizzata una pressione di un tasto, esso resetta il 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. 
    } 
... 

Answer 5

questo ha funzionato per me (tratto da https://gist.github.com/josephwegner/1228975).

Riferimento di nota a un elemento html con wrapper id.

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