javascript - Prevent cursor from hiding in Browser after key is pressed - Stack Overflow

admin管理员组

文章数量:1405324

I am aware that in most browsers (newest generation), the mouse cursor gets hidden when you type in any key like 'A' or Space. This is to let the user see what he types in. The cursor gets back visible as soon as you move the mouse for a pixel.

Now here es the problem -- This happens everywhere in a browser, even when I've focused a non-input element like a div or the such. I do, however, not want the browser to hide my cursor after the user has pressed a key as I'm using keys as shortcuts.

So the question is -- is there any way or trick or anything to prevent this from happening and/or letting the cursor auto-appear again after key-up?

I've tried various "hacks" over the web like invisible divs etc. but everything without success.

EDIT: As questioned, I am experiencing this behavior on every Browser (Chrome latest, Firefox latest, Safari latest) on latest MAC-OS-X.

I am aware that in most browsers (newest generation), the mouse cursor gets hidden when you type in any key like 'A' or Space. This is to let the user see what he types in. The cursor gets back visible as soon as you move the mouse for a pixel.

Now here es the problem -- This happens everywhere in a browser, even when I've focused a non-input element like a div or the such. I do, however, not want the browser to hide my cursor after the user has pressed a key as I'm using keys as shortcuts.

So the question is -- is there any way or trick or anything to prevent this from happening and/or letting the cursor auto-appear again after key-up?

I've tried various "hacks" over the web like invisible divs etc. but everything without success.

EDIT: As questioned, I am experiencing this behavior on every Browser (Chrome latest, Firefox latest, Safari latest) on latest MAC-OS-X.

• javascript
• html
• google-chrome
• firefox

Share Improve this question Follow edited Oct 1, 2013 at 9:45 anderswelt asked Oct 1, 2013 at 9:32 andersweltanderswelt 1,53211 gold badge1212 silver badges2323 bronze badges 3

• 3 Doesn't happen with Chrome or Firefox on Linux/Ubuntu. Are you sure you don't have a plugin installed? Or enabled a feature of your mouse driver? – Aaron Digulla Commented Oct 1, 2013 at 9:40
• 1 I've tried to reproduce the behavior you described but seems it doesn't work for me. Windows7 + lastest chrome OR latest Firefox. Could you specify environment you are using? – 4ndrew Commented Oct 1, 2013 at 9:42
• Confirmed in Chrome on Mac OS X 10.8.4 – Stephan Muller Commented Oct 1, 2013 at 9:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

This is not browser behavior but operating system behavior, and specifically Mac behavior. The cursor will not only hide if you type in the browser, but in any application on your Mac.

This means that the browser has no knowledge or control over the cursor, because it's hidden from a higher level. You can change the cursor with CSS or JavaScript for example, but it still won't show until you move it. You can't actually move the cursor using JavaScript, but even if you could I still doubt it'd help because the operating system didn't receive a signal of the cursor moving.

Also refer to this question on apple.stackexchange.: How do I disable hiding of the mouse pointer while typing text?

I just thought of a possible solution to this, but it's going to be really hard to do this in a way that is not annoying the user:

1. Whenever the cursor moves, save it's position
2. When the document observes a keyup, show an image of a cursor at the exact coordinates of where the actual cursor was seen last (it's still there, but hidden)
3. When the actual cursor moves again, hide the image (actually, merge this function with 1.)

The problem here is going to be knowing what cursor image to show. You would first have to detect if the user is on a Mac (or another OS that hides the cursor), but also what cursor should be shown depending on what you're hovering. It means that for every element you're hovering you would also have to detect which cursor is being shown and show an image of the same cursor.

You can cover the basics/defaults by adding some css rules that cover hovering of links and inputs (pointer and text respectively), but what if the user uses custom cursors defined in his OS?

I haven't tried any code yet, this is just a concept that should work in theory so let me know if you need more help with it, but honestly I'd advise against trying to acplish this. It's going to bring more trouble than it solves, imo.

-edit- Here's a Proof of Concept: http://jsfiddle/4rKMx/2/

本文标签： javascriptPrevent cursor from hiding in Browser after key is pressedStack Overflow