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.
Related
Here is my situation as you see in the picture. I am working on a markdown editor. A floating command button panel is visible, when mouse over the textarea. The command button panel is absolute positioned at the top right corner of the textarea.
But some times, text in textarea is blocked by the command panel, making selecting the text underneath it impossible.
I'd like to detect a situation when there is a text under the command panel, then apply a class to shift command panel up 50px.
Here is my question: How to detect if there is text in textarea tag under a rect shape div?
Thanks!
AS you can see in the below picture, the command panel hovering over textarea blocks the text. I'd like to detect this situation.
So, one thing that you can do is get the width of the text area. AKA the cols attribute of the textarea.
Once you have the width of the text area, you get the text (textarea value) within the text area and find the length of that text. If the length of the text within the textarea is greater than the number of cols you know that the text will span the length of the textarea.
One very apparent caveat is that lets say you are writing a poem or something and the text never spans the length of a full line, that length will be longer than the number of cols while never actually spanning the full length of the textarea
Another inherent issue is that if you start scrolling in your textarea new text may come underneath the controls.
I don't really think it would be possible to detect whether or not text inside of a textarea is underneath a certain div.
What I would probably suggest doing is just always have the controls div 50px higher than the textarea. Simple solution, that will still look good and won't require any crazy coding on your part, because I can't really picture an easy way (or any way for that matter) to do this.
Hope this helps.
Ok, I've had to do something similar for a resizing textarea in the past. The secret is to have an offscreen input or textarea with variable width. As the text is updated in your visible text field, copy the text over to the off screen element element. The shadow element has to have all of the same styling that affects the visible element (padding, border, width, height, font size, etc) to make sure you get accurate results. Then measure the width of the shadow element on each text change.
I need a way of scrolling to the caret position in a textbox no matter where the caret is. The problem I am having is very similar to this one:
Possible to scroll caret into view inside a single HTML text field with JavaScript?
The solution to the other question I mentioned is given as adding an extra character at the end (which sets the caret position to be at the end of the text) and then simulating a backspace key press (which scrolls to the end of the text). It works fine while the user keeps typing, the text scrolls properly since we are always adding characters to the end of the string. However, if the user, for example, clicks somewhere in the textbox, it sets a new caret position, and if the user then starts typing from the new caret position, the extra key/backspace solution does not work properly as it always takes us to the end of the string.
I need a way of scrolling to the cursor position while the user is typing, no matter where the cursor is. Some more additional information: While using Firefox, setting the textbox value in my Javascript code scrolls to the leftmost position in the textbox although the cursor is at the end. The illustration in Possible to scroll caret into view inside a single HTML text field with JavaScript? shows what I mean. It does not happen on IE, Chrome, Safari. So the issue mentioned in this question a problem for me in Firefox only. Any ideas?
This one's a challenge:
Suppose you have two text inputs, as in this fiddle. When the user "scrolls" inside of one (e.g. by moving the cursor to the far right or left), I'd like to "scroll" the other so that it stays in sync. Can this be done, at least in modern browsers?
I would change the text that isn't being input to an IFrame. If both need to be inputs, then dynamically switch your element from iframe to input when it is focused on/away from.
In the input box, you can find where the caret is by using the selection properties; then the IFrame can then be scrolled using scrollTo.
I'm afraid I don't have a complete solution for finding out exactly the scroll state of the input box.
I am trying to create a javascript code editor just for learning and I am doing a great job so far. The only thing is that I wanna place the autocomplete box in a position relative to the text cursor in textarea. So how can I determine the cursor position relative to the upper left corner of the window ?
Something else please, how can i capture the tab & enter keys press in a textarea ?
I am using a semi-transparent textarea (semi to keep the cursor blinking) with underlying div to enable code highlighting later on. Is this the best technique to do that ? Or there is a way to make textarea accept rich text or HTML ?
I suspect that you can do all that without a textarea. Read up on the contentEditable property. Here's a demo. This is how the Google Docs editor is implemented, incidentally. And here's a stackoverflow question dealing with finding the cursor position in a contentEditable div.
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!