Ẩn con trỏ chuột khi không sử dụng JavaScript

Question

Có thể sử dụng JavaScript để đặt thuộc tính cursor cho thuộc tính none nếu chuột không hoạt động trong một khoảng thời gian nhất định (ví dụ: năm giây) và đặt lại thành auto khi nó sẽ hoạt động trở lại?

EDIT: Tôi nhận thấy rằng none không phải là giá trị hợp lệ cho thuộc tính cursor. Tuy nhiên, nhiều trình duyệt web dường như hỗ trợ nó. Hơn nữa, người dùng chính cho điều này là bản thân tôi, do đó, có rất ít cơ hội nhầm lẫn phát sinh như là kết quả.

tôi đã có hai kịch bản có thể làm điều gì đó tương tự:

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

và

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

Với mỗi trong số này, khi chuột không hoạt động hơn năm giây lượt màu nền màu trắng và khi con trỏ được di chuyển, nền sẽ chuyển sang màu đen. Tuy nhiên, chúng không hoạt động để làm cho con trỏ biến mất. Điều làm tôi ngạc nhiên là nếu tôi đặt lệnh document.querySelector("body").style.cursor = "none"; vào bảng điều khiển JavaScript, nó hoạt động hoàn hảo. Bên trong các kịch bản, nó dường như không hoạt động.

Tôi đã đăng các tập lệnh ở trên vì điều này là xa như tôi đã đến để làm việc này. Tôi không nhất thiết yêu cầu sửa chữa cho một trong hai kịch bản; nếu bạn biết cách ẩn con trỏ hiệu quả hơn, hãy chia sẻ.

Answer 1

Trong CSS 2 none không phải là giá trị hợp lệ cho cursor property. Nó là hợp lệ trong CSS 3, tuy nhiên.

Nếu không, bạn có thể sử dụng con trỏ tùy chỉnh được tải từ một URI đơn giản là trong suốt.

Tôi cho rằng điều này sẽ gây mất tập trung cao cho người dùng, vì vậy, tôi sẽ không khuyên bạn thực sự làm điều đó.

Answer 2

Tác vụ sau đây dành cho tôi trong Firefox 3.6.13 miễn là con trỏ trên một phần tử thực không có con trỏ không mặc định (vì vậy nó không hoạt động nếu con trỏ ở trên phần tử biểu mẫu hoặc liên kết, ví dụ), mặc dù nói chung tôi khuyên bạn không nên làm điều này, bởi vì nó không phải là tiêu chuẩn và khả năng sử dụng rất kém.

Ngoài ra: Tương thích hơn không sử dụng querySelector() khi có giải pháp thay thế, chẳng hạn như document.body hoặc 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

Có một plugin jquery idletimer kiểm tra xem người dùng có không hoạt động hay không.

Answer 4

Trong ứng dụng kiosk của tôi, để đảm bảo không có ký tự "bị ép" khi di chuyển khỏi trình bảo vệ màn hình (chúng thường được gửi tới PC qua máy quét mã vạch hoặc đầu đọc RFID) và để đảm bảo màn hình quay lại ngay lập tức, tôi sử dụng các bit mã sau đây, cùng với tệp con trỏ cur trong suốt và tắt tất cả tùy chọn tiết kiệm/tiết kiệm màn hình trong hệ điều hành máy chủ. Tính năng này hoạt động trong Chrome 12 và có thể là nhiều trình duyệt khác. Tôi không nghĩ rằng có bất kỳ mã dành riêng cho Chrome nào - đó chỉ là điều dễ nhất để tự động khởi chạy vào chế độ kiosk.

Các bit cẩu thả lặp qua các phần tử INPUT là cần thiết vì các phần biểu mẫu đó sẽ giữ nền mặc định (thường là màu trắng) của chúng.

Nếu bạn sử dụng hình ảnh hoặc văn bản màu hoặc các đối tượng khác như vậy, bạn sẽ cần tìm ra cách xử lý những hình ảnh đó. Tôi chỉ đang xây dựng các ứng dụng thu thập dữ liệu, vì vậy nó chỉ là văn bản màu đen trên đó trên màn hình. Bật màu nền của trang đen làm cho toàn bộ màn hình trở thành màu đen và ngăn không cho ghi vào.

Điều này có thể và nên được thực hiện bằng cách áp dụng các bit CSS khác nhau thông qua JS, nhưng nó hoạt động, tốt và tất cả ở một vị trí trong mã, vì vậy thật dễ dàng để dán xung quanh, nói, đến một nơi như thế này.

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

hỏa hoạn onkeydown unSS nằm trong cơ thể để mỗi lần nhấn phím được nhìn thấy nó sẽ đặt lại hẹn giờ.

<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

Điều này làm việc cho tôi (lấy từ https://gist.github.com/josephwegner/1228975).

Lưu ý tham chiếu đến phần tử html có trình bao bọc 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); 
      } 
    }); 
});