Lets say I have an input with position fixed and wherever user scrolls, it would follow the user view. However, when an input is focus, it triggers the iPad keyboard, the input is jumping to the top and the window is scrolling to top as well. Is there anyway to prevent this happening and remaining the input wherever it is??
Related
I have button and textarea, which is invisible. When click on button textarea appears and is focused, the keyboard appears on ios(Safari), and the screen correctly scrolls to textarea.
However, if I wrap textarea with transition component screen does not scroll to textarea and textarea appears behind the keyboard. Please advise how I could have correct focus with transition?
I use vue 2.6.10
code example: https://jsitor.com/ZGmF0GPpqO
I have a textarea with a lot of text and a vertical scrollbar. When I move the cursor beyond the visible area (imagine having a long document, and then pressing down arrow many times until cursor goes off screen), the browser will automatically scroll the cursor into view, so it always remains visible.
How do I prevent this behavior? I need to be able to move cursor beyond the visible area, without it being autoscrolled.
(technically, it's not a textarea but a React-based text editor, in dom it's a div with content-editable set to true, not sure if it matters)
It doesn't appear this is possible. From the spec:
It MUST be possible to put the caret in any of the Legal Caret
Positions programatically and for the caret to be visible in these in
any editing host that is in the "events", "caret" or "typing" state.
https://w3c.github.io/editing/contentEditable.html#caret_positions
"MUST put the caret" & "MUST be visible" indicate this.
I have an HTML web-app which runs in a viewport. The web-app does not scroll. It is all contained within one screen.
I added a text-field into my app. When I press the input field the on-screen keyboard pops up.
1. The keyboard pushes the web-app upwards for some reason (The view-port defines a resolution which should not allow scrolling).
2. When I am done the app stays "scrolled" off-screen.
Is there a way to fix this? Is there a way to control the keyboard using Javascript/CSS?
Crude, but can you handle the blur event on the form field then call window.scrollTo(0,0)?
I have a web page with left and right DIVs, both set to overflow: auto with content such that both divs have vertical scroll bars.
I use a jquery keyboard event handler attached to document to have SPACE keys and move the selection from one item in the right DIV to the next item in the right DIV. I have a table of options on in the left DIV. If I click on a link on the left, then hit space, the keyboard handler performs the correct operation in the right DIV, but the left DIV also scrolls down. If I click on some blank space in the right DIV and hit space again, everything behaves correctly.
It is clear to me that overflowing DIVs (and presumably other block elements) have focus, but I can't find any discussion on how to manipulate this, nor can I find any information on blocking key events to default handlers. I know there must be a way because Google Reader doesn't have the same problem, but so far I haven't been able to figure out what they are doing to get the behavior I desire.
event.preventDefault(); should do it (add it first in your handler function).
http://api.jquery.com/event.preventDefault/
Once a page with a textarea is loaded, I want some textarea to have the focus immediatly if the mouse cursor is inside that textarea. This is the easy part because a onmousehover handler can set the focus.
Now, how to I also set the position of the caret? I would like the caret to be where it would be if the user had clicked using the mouse to set the focus/caret.
The basic use case is :
User clicks on a link and waits (mouse barely moves)
A page is delivered, it contains a big textarea only, full of text
User types using keyboard
Characters are inserted right below the mouse cursor
Today the user has to wait until the caret is visible (at the top left of the textarea) and then click to move the caret before typing.
Thanks!