Prevent Highlighting of page with left mouse click / drag
Posted on 2013-10-23
The code may be a bit too complex to add to jsFiddle, but here is my dilemma.
I have a "wizard" (created with jQuery) and when you press the "proceed" button, screens "flows to the right", making the next step visible. When proceed is clicked again, it flows the right again. If the "back" button is clicked, it "flows to the left".
It is just a series of <div>s side by side with a portion, each step, being visible at a time.
The problem is that when a user tries to highlight a field and "drag the cursor over the entire field", if they "keep dragging", the screen flows to the right with the expectation of highlighting all the text on the page, thus flowing past the other steps.
It is same as if you were to start at the top of a web page and drag all the way to the bottom, the entire page and its text are highlighted, with the page scrolling with the mouse.
Is there a way to prevent this?
I could auto focus / select the field once they click inside it in the hopes that they will stop "dragging the mouse", but I need more control over it.
I'd like to prevent the "left click / highlight" altogether from anywhere on the page.