13

マウスが一定時間（たとえば5秒間）非アクティブになっている場合、JavaScriptを使用してcursor属性をプロパティに設定し、再びアクティブになったときに元に戻すことはできますか？noneauto

編集：私はそれがプロパティnoneの有効な値ではないことを認識していcursorます。それにもかかわらず、多くのWebブラウザがそれをサポートしているようです。さらに、これの主なユーザーは私自身であるため、結果として混乱が生じる可能性はほとんどありません。

同様のことを実行できる2つのスクリプトがあります。

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の有効な値ではありません。ただし、CSS3では有効です。cursor

そうしないと、単純に透過的なURIからロードされたカスタムカーソルを使用できる可能性があります。

ただし、これはユーザーの気を散らすものだと思うので、実際にそうすることはお勧めしません。

于 2010-07-28T15:09:19.927 に答える
9

Firefox 3.6.13では、デフォルト以外のカーソルがない実際の要素の上にカーソルがある限り、次のように機能します（たとえば、カーソルがフォーム要素またはリンク上にある場合は機能しません）。 ）、ただし、これは非標準であり、使い勝手が非常に悪いため、一般的にはこれを行わないことをお勧めします。

余談ですが、またはquerySelector()などの代替手段がある場合は使用しない方が互換性があります。document.bodydocument.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年もまだ答えを探している人がいる場合（私もそうですが）、このアプローチはFF71とChrome78で機能します。

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切り替え、名前付き関数を使用する方が明確です。

OPがJQueryを使用した回答が期待されることを指定しなかったことは知っていますが、私の経験では、さまざまなアプローチから学ぶことができていつもうれしいです。

于 2019-10-29T10:10:23.513 に答える
1

私のキオスクアプリでは、スクリーンセーバーから移動するときに「押された」文字が失われないようにし（通常、バーコードスキャナーまたはRFIDリーダーを介してPCに送信されます）、画面がすぐに元に戻るようにします。次のコードと透明なcurカーソルファイルを使用して、ホストOSのすべてのスクリーンセーバー/省電力オプションを無効にします。これはChrome12、およびおそらく他の多くのブラウザで機能します。Chrome固有のコードはないと思います。キオスクモードで自動起動するのが最も簡単な方法です。

INPUT要素を反復処理するずさんなビットは、これらのフォームパーツがデフォルト（通常は白）の背景を維持するために必要です。

画像や色付きのテキストなどのオブジェクトを使用する場合は、それらの処理方法を理解する必要があります。データ取得アプリを作成しているだけなので、画面上に黒いテキストが表示されます。ページの背景を黒くすると、画面全体が黒くなり、焼き付きが防止されます。

これは、JSを介してさまざまなCSSビットを適用することで実行でき、実行する必要がありますが、うまく機能し、コード内のすべてが1つの場所にあるため、たとえば、このような場所に簡単に貼り付けることができます。

<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 に答える