Ausblenden des Mauszeigers im Leerlauf mit JavaScript
Ist es möglich, JavaScript zu verwenden, um die cursor
- Attribut der Eigenschaft none
wenn die Maus inaktiv ist für eine bestimmte Zeit (etwa fünf Sekunden), und setzen Sie es zurück auto
wenn es wieder aktiv ist?
EDIT: ich merke, dass none
ist kein Gültiger Wert für die cursor
Eigenschaft. Dennoch, viele web-Browser scheinen zu unterstützen es. Außerdem werden die primären Benutzer für diese selbst ist, so gibt es kaum eine chance der Verwirrung, die sich als Ergebnis.
Habe ich zwei Skripte, die etwas ähnliches tun:
window.addEventListener("mousemove",
function(){
document.querySelector("#editor").style.background = "#000";
setTimeout("document.querySelector('#editor').style.background = '#fff'", 5000);
}
, true);
und
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;
}
};
Mit jedem von Ihnen, wenn die Maus inaktiv ist für mehr als fünf Sekunden die Hintergrundfarbe weiß wird, und wenn der cursor bewegt wird, der hintergrund wird schwarz. Jedoch, Sie arbeiten nicht für die Herstellung der cursor verschwinden. Was mich wundert ist, dass wenn ich den Befehl document.querySelector("body").style.cursor = "none";
in der JavaScript-Konsole funktioniert es perfekt. Innerhalb des scripts, es scheint nicht zu funktionieren.
Habe ich das oben geschrieben scripts, wie das ist, soweit ich es kommen immer diese arbeiten. Ich bin nicht unbedingt Fragen, für ein fix für die Skripte; wenn Sie wissen, dass ein effizienter Weg, versteckt den cursor, bitte teilen.
Du musst angemeldet sein, um einen Kommentar abzugeben.
In CSS 2
none
ist kein Gültiger Wert für die diecursor
Eigenschaft. Es gilt, CSS-3, jedoch.Andernfalls werden Sie in der Lage, um eine benutzerdefinierte cursor geladen von einer URI, die ist einfach transparent.
Ich würde dies sehr störend für den Benutzer, obwohl, so würde ich nicht raten, Sie tatsächlich zu tun.
none
ist nun eine gültige CSS3cursor
- Eigenschaft.Folgende funktioniert bei mir im Firefox 3.6.13, solange sich der cursor über einem tatsächlichen element, das nicht haben eines nicht-Standard-cursor (also es funktioniert nicht, wenn sich der cursor über einem Formular-element oder den link, zum Beispiel), obwohl im Allgemeinen ich abgeraten, dies zu tun, denn es ist nicht-standard und extrem schlechte usability.
Beiseite: Es ist nicht mehr kompatibel zur Verwendung
querySelector()
wenn es eine alternative, wiedocument.body
oderdocument.getElementById()
.document.body.style.cursor = "";
zu ermöglichen arbeiten auf jedem element.In meinem kiosk-apps, um sicherzustellen, dass keine "gedrückt" Zeichen verloren gehen auf eine Bewegung aus dem screen-saver (Sie werden in der Regel an den PC über einen bar-code-scanner oder rfid reader) und um sicherzustellen, wird der Bildschirm kommt wieder auf sofort, ich benutze das folgende Stückchen code, zusammen mit einem transparenten cur cursor-Datei, und deaktivieren Sie alle auf dem Bildschirm speichern/Energiespar-Optionen in der host-OS. Dies funktioniert in Chrome 12, und wahrscheinlich viele andere Browser. Ich glaube nicht, dass es jedem Chrome-spezifische code-es ist einfach die einfachste Sache zu automatisch starten, in einen kiosk-Modus.
Schlampig bits, Durchlaufen die INPUT-Elemente sind erforderlich, weil diese form Teile behalten Ihren default (normalerweise weißen) hintergrund.
Wenn Sie Bilder oder farbigen text oder andere Objekte, die Sie brauchen, um herauszufinden, wie mit denen. Ich bin nur Gebäude Datenerfassungs-apps, so ist es nur schwarzer text da oben auf dem Bildschirm. Drehen Sie den hintergrund der Seite schwarz wird der ganze Bildschirm schwarz, und verhindert, dass brennen in.
Dies könnte und sollte getan werden, indem man verschiedene CSS-bits über JS, aber es funktioniert gut, und es ist alles an einer Stelle im code, so ist es einfach zu kleben um, sagen wir, an einen Ort wie diesen.
onkeydown feuert unSS ist in den Körper, so dass jedes mal, wenn eine Taste gedrückt wird gesehen, es wird die Stoppuhr zurückzusetzen.
Dieser arbeitete für mich (aus https://gist.github.com/josephwegner/1228975).
Hinweis Verweis auf ein html-element mit der id wrapper.
#wrapper
mitbody
also ich könnte lassen Sie die Maustaste irgendwo auf die Seite. Auch Chrome benimmt und löst mousemove jede Sekunde oder so zu umgehen das ich gespeichert die Maus coords jedes mal, und dann sofort innerhalb des mousemove-Abschnitt vergleichen, ev.clientX / Y, um die gespeicherten Werte.Es ist ein jquery-plugin idletimer, der prüft, ob ein user inaktiv ist oder nicht.