I know getting / setting cursor position in a contentEditable is damn near impossible. I don't care about knowing this information. I need to be able to save current selection, modify innerHTML of the div, and then restore the selection.
I've bee experimenting with the answer provided at contenteditable selected text save and restore . It works after typing in the div, but not after programmatically modifying the innerHTML of the div. Instead, when I call restoreSelection, the caret simply goes to the beginning.
Any suggestions as to how to be able to save / restore selection on a contentEditable after modifying the innerHTML instead of typing would be much appreciated.
If you're doing some kind of string substitution on the existing innerHTML of your editable element, you may be able to use my Rangy library and its save/restore selection module. It uses invisible elements with particular IDs to mark the start and end boundaries of the selection, so if your innerHTML change does not include these elements then this will not work.
Another alternative is to do it based purely on character indices within the text nodes of the element. I've written a naive implementation here: https://stackoverflow.com/q/5596688/96100
Related
Is it possible to highlight text in an HTML document using without wrapping it with <span> or any other tag for that matter?
For example, in the HTML code <p>The quick fox</p> I would like to highlight quick but without adding a DOM element around it. Adding a DOM element to a parent element is fine.
Thanks!
No, it is not possible.
You can't tell the browser to render a piece of text differently without inherently changing the DOM, regardless of whether you do it statically or dynamically (with Javascript, for example, as a post processing step).
It is possible if you use an absolutely positioned element with a transparent repeating background image or a transparent background color (using rgba or hsla) and position it over the selected area.
Another way to do it would be to have an absolutely positioned canvas element without a background that takes up the whole browser viewport and draw a transparent rectangle over the selection.
It's not possible.
If you just want no tags in the original source code, it might be possible by adding tags later using Javascript magic. You could do something like
<p highlight="quick">The quick fox</p>
and write a JQuery/Prototype/plain JS function to highlight it on the fly, but what for and why? If you elaborate a bit, someone may come up with an idea.
The only way to do this than I can imagine would be to use the <canvas> element, and render absolutely everything by hand.
I need to highlight certain words in Twitter input form as user types their tweet but apparently Twitter has a script that protects the form and removes any HTML tags that I put in there. Is there any way to do this without using tags?
The only way I can think of is to use getBoundingClientRect() and draw an overlay over the box while the user is writting.
getBoundingClientRect() is expensive, but running at user typing speed is no problem actually.
It will return the absolute position of the element from the top/left margin of the window, so you can create an absolute (or fixed I guess) element over the box and set the received position to your elements.
I guess that the fastest way is to process the text and create HTML tags like you do now, and then get the getBoundingClientRect() and create the overlay of each tag. Twitter then will reset the input to whatever it wants, but you already got the getBoundingClientRect() as long as you do that in the same event loop when you create your tags (before Twitter modify nothing).
IMPORTANT: Don't forget to add pointer-events CSS to none so no mouse clicks are catch by your overlay.
pointer-events documentation here
getBoundingClientRect documentation here
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/
I have a contenteditable div in my GWT application and when I press backspace or delete key, I want to get the node before and after caret position and check whether it is a text node or not.
Element element = DOM.createDiv();
element.setAttribute(contenteditable, "true");
basePanel.getElement().appendChild(element);
This is how I created the content editable div.
Any solutions will be appreciative.
Regards.
Dig into selection and range classes. They are not yet browser compatible, so you might use
https://code.google.com/p/rangy/ or
jquery++
for abstraction. You then create a range for your div, expand it by 1 on both ends. then you examine startcontainer and endcontainer to find out their node type.
The selection and range apis are not overly beautiful and working with them is more involved than necessary, but that is the way to get it done.
Is it possible to get the word under the mouse cursor in a <textarea>?
I have seen this question asked many times regarding text in <p> tags or similar html output tags, such as here, but the <span> based solution doesn't work with a <textarea>, for obvious reasons.
One approach I have considered is to fire a jQuery click() event to place the cursor and then use something like Tim Down's answere here to get the current word based on the cursor location. But a click() event doesn't seem to place the cursor at all.
So that answer would be sufficient as well. How do I mimic a click event within a <textarea> so as to place the cursor at the current mouse position?
You could have a look at HTML5 CONTENT EDITABLE, this would help you to merge the first link you gave in your question and get your solution