First time posting here. I'm working on a mouse-and-keyboard disability device for a course bioengineering course and I've got a feature that I've got no clue how to begin implementing. Basically, I want to be able to "select" which are the K "focus targets" nearest to the cursor, draw boxes around them/highlight them (much like Chrome or Windows does) and, after deciding which "target" I want to select, focus/click that one. The goal is to use eye-tracking software to move a cursor and then blink/contract a muscle to see which are the closest targets (that way you can click on really tiny stuff which would be hard to select otherwise).
Not sure if "focus target" is the right word, I mean "what gets selected next" after you press Tab. If there's some "universal" way of doing this across apps that'd be great, but either a browser-only or Windows-only way would be great. The only workaround idea I've had so far is to press Tab a bunch of times, see what changes appear on screen, use OpenCV to detect on-screen changes and then see which are closest to the cursor, but that means the screen would spaz out and also wouldn't work if there's any sort of animation on the screen.
Thanks in advance!
You can get element by your cursor and then search the dom tree for input, and then you can use javascript to focus on that input
Related
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 comes 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.
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.com:
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:
Whenever the cursor moves, save it's position
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)
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 accomplish this. It's going to bring more trouble than it solves, imo.
-edit-
Here's a Proof of Concept: http://jsfiddle.net/4rKMx/2/
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 comes 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.
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.com:
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:
Whenever the cursor moves, save it's position
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)
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 accomplish this. It's going to bring more trouble than it solves, imo.
-edit-
Here's a Proof of Concept: http://jsfiddle.net/4rKMx/2/
I am really baffled at this issue because I have no idea where the problem is at, nor do I know where to begin.
I have two selects as you can see in the image. The one to the left is fine but the one on the right is much smaller than the content within it. I personally believe the issue is with the plugin but again, I don't know where to look.
Here is what I've done. I've disabled the plugin and the select box comes back to full size and the onchange event works as expected. When I enable it again, the onchange is more like a mouseup event because the instant you click on the select, you're forwarded over to another page; it won't allow you time to make a selection.
Can anyone shine a little joy over this way, please?
I noticed that in some websites, text selection behaves in a somewhat clumsy manner: the user click and hold the left button, and then move it in the direction of the text he/she wants to select, and then an entire portion of text on the opposite side of the movement gets selected.
This is not something that happen everywhere, and it's hard do describe, so I will provide an example. I've found this really cool article. Check the last line of it:
ENV:REDIRECT_STATUS is my new best friend.
If I click on the left of this line, and drag a little to the right (say, up till the :), I expect to have the ENV: portion of this line selected. Instead, what gets selected is the remainder of this line (REDIRECT_STATUS is my new best friend.) plus every comment and the sidebar! I am using Firefox 15.0.1, but already notice this behaviour in Chrome and Internet Explorer.
So what I want to know is, why this happen, and what needs to be done in order to prevent this glitch.
PS: please excuse me for not being clear on this subject; I found this issue really hard to describe on words.
It all has to do with the HTML markup and the CSS. The browsers tend to select the text in the same order as it appears in the HTML. Adding padding like Tim Down suggested can help user select the text because it gives a little margin of error in the text selection.
I have a transparent floating iFrame with a lot of empty area. It floats on top of my site (position:fixed).
The problem is that if anyone click on the empty area, it does not click below on the real page.
Is there a way to perform this? Like a click through in someway.
Well, no. The only thing you could do is to simulate it by capturing the click event, get the coordinates, and then try to find the correct element beneath, and execute the onclick event handler. However, it's a bit impractical, and I think that you should expect some bugs..
Are you sure there isn't another way to solve your problem without that transparent iframe?
Traversing DOM would be necessary, as stated by Onkelborg.
You'd get the mouse position and test every dom element to see whether or not it was clicked. You'd then have to invoke whatever event handler you've defined... You'd have to manually manage event bubbling as well [which is different between IE and other browsers, as far as i know]...
I should also note that it isn't possible to take a picture of your website with JavaScript, so you couldn't click through transparent text either way, nor could you click through images that have transparency.
I think the best option here would be for you to show us an example of what you're trying to do. Usually, a little restructuring of the website can go around this problem.