I have a content editable div that has pre-existing text. This element is by default set to false (not editable), and on double click I am changing the content editable attribute to true and then focusing on the div element.
This is currently selecting all the pre-existing text inside the content editable div, but I would prefer for the caret to be inserted at the closest text DOM node from the mouse cursor position when the double click event fired.
Needing only to support webkit, and having jQuery as a tool if needed, what is the most straight forward way to do this?
If you only need to support chrome you can use document.caretRangeFromPoint
Related
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 am about to write a input system for a web application that is a bit more complex. We have Labels in our text that are weather displayed as a bootstrap label (when the contenteditable div is blured) or displayed as handlebars e.g. {{firstname}} when the text is focused.
The changing in states is done by jQueries $().html(content) where I change the content based on the source when I focus the text field.
The problem is: if I click the text, I don't want to need to click a second time to place the cursor, because the text changed. It works as long I don't click inside of a tag but inside the contenteditable root element. but if I click inside of a tag inside the contenteditable, the cursor is not set.
my idea was to get the mouse position when clicking the contenteditable and then set the text cursor to exact that position when I have changed the text. But while I know, how I set the cursor to a specific offset inside a text node, I have no clue how to get this necessary offset when clicking. any ideas?
Edit: Here is the behaviour in a little screencast: https://youtu.be/RZvHxxM6wsQ
Edit2: Here is the problem reproduced on the smallest kind of working example:
https://jsfiddle.net/8z5Lnxef/3/
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 have some html as follows (for IE9):
<div contenteditable="true">
Some editable text
<span class="code" contenteditable="true" unselectable="on">uneditable text</span>
more editable text
</div>
In IE9 the span contenteditable must be set to "true" to make the span uneditable and in Chrome it is set to "false" to make the span uneditable!!
However, in IE9 when the mouse goes over the span the cursor appears as the move cursor (crossed arrows). The cursor is set in my css file to be 'pointer', but this is not working for IE9.
How can I change the cursor to be a hand or an arrow in IE9?
The following works for me fine on both IE9 and Chrome 38, the content of the span is editable and the text outside of the span is not editable. The cursor is also the same typing cursor that you would expect when you hover over any text.
The only diffrence i noticed is that on Chrome the span is highlighted in blue when in edit mode.
<div>
Some NOT editable text
<span class="code" contenteditable="true">EDITABLE text</span>
more NOT editable text
</div>
HTML5 Validation on Visual Stidio IDE for example will tel you that contententeditable is not a valid attribute of element div and unselectable is also not a valid attribute of element span.
If you are still having issues with the cursor, please post your CSS.
Making a child of an editable element non-editable is a messy business, with bugs and incompatibilities between browser versions; see e.g. contenteditable=false inside contenteditable=true block is still editable in IE8 and HTML contenteditable with non-editable islands
But you have apparently found the workaround (for IE) of using the nonstandard attribute unselectable=on. By making the element unselectable, it also makes it non-editable because there is no way getting at editing it. It is this attribute that matters here to IE, and you should use the logical contenteditable=false to cover other browsers. This will make the cursor a text cursor, which is less confusing than what you have now. It might be said to be misleading, but IE apparently IE wants to use text cursor for editable elements and their children (though the illogical combination contenteditable=true unselectable=on seems to cause a move cursor). After all, it is editable, including the non-editable island in the sense that the island as a whole can be removed or replaced. Anyway, in such issues IE ignores cursor property settings in CSS.
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.