Does anybody have workable solution to get or set cursor position in contenteditable div with elements inside?
What I going to do is to create twitter-like field where I will insert on # sign pressed. Problem is that browsers are pretty buggy with contenteditable attribute, so I cant rely on them for insert. So my algorithm is:
When # pressed
GetCursorPos
get content of div as a string, split it to two halves
Insert string with span between halves
Do $(div).html(new_content) - cursor will be dropped to beginning
move cursor to old_cursor + span's text length
Problem with 2 and 5. I checked following questions:
Set cursor position on contentEditable <div>
How to set caret(cursor) position in contenteditable element (div)?
Set the caret position always to end in contenteditable div
How to move cursor to end of contenteditable entity
contenteditable, set caret at the end of the text (cross-browser)
And many more... There is NO workable solution (FF, Chrome, IE) for setCursorPos(elem, pos) - everywhere is move to the end or save and restore. Also I have getCursorPosition, but sometimes in chrome it gives incorrect results, so this function appreciated also!
Thanks a lot!
Related
I have already asked another question: How to set caret position in a contenteditable after I append a span into it; and move caret to the end of the span?
My code adds the span tag and then modifies the innerHTML of the content editable element like;
contenteditable.innerHTML = newModifiedDataWithSpan;
but this causes my contenteditable to lose focus. If I use focus() on the element, the caret moves to the beginning of the contenteditable. Is there anyway to append a unicode character to the end my inputted span, and then search for said character, remove it and move caret to that position?
Exist way how to set caret pixel position in editable DIV with JavaScript (Angular, jQuery)? I look for this functionality many days.
Get caret position in pixel I can do with this (there is problem with autowrapped long text).
I need switch from one editable DIV to another with UP/DOWN key handler and I need same position of caret. Fe. if I have DIV#2 and caret position is after third X (30px from left), then click UP key. I need switch caret to DIV#1 on last line (computed with autowrap text) on same position from left (30px from left! not after third I). As on this animation:
Please, help me!
Consider the following contenteditable element
<div contenteditable>
Foo bar <span contenteditable="false"></span>x</div>
DEMO
Now, the nice thing going on here is that whatever browser you take, the caret is always placed after the x if you click somewhere inside.
But, because I don't want the x at the end of the line and you remove the x the behaviour of where the caret is placed is different (safari and Edge do strange things). So, I figured that when the last line of a contenteditable ends with a span which is not editable you will have problems, so I did
<div contenteditbale>Foo Bar <span con...="false"><span></span></div>
Which actually doesn't help at all, same behaviour. It seems that the caret will not show inside an empty span
Any suggestions how to fix this?
So are you saying the caret is going inside the span, or is it a separate element? You could create a CSS Pseudo Element to position the caret where you would like it. Just use:
div::after {
content: url(caret.png);
}
Here's an updated DEMO
How to prevent content editable from styling text at cursor position. By default it get style from closest node. But how to override this behavior?
<div contenteditable> Sometext <b>bold</b>|</div>
Example on JSFIddle If you set caret (vertical bar in example) on the end of text and start typing it will be bold all the time.
My goal is to highlight some words programmatically. Bu to prevent of style user input.
Thanks.
It's a common problem for which there is no easy solution. Inserting a zero-width space character (U+200B, for example) immediately after the <b> element is one (hacky) solution.
See How to set caret/cursor position in a contenteditable div between two divs., for example.
I have a long text field and what I want to do is that when a user types an '#' character a list of users appear just like a typical auto-complete. However I want the list of users to appear below the '#' character which could be 20-30 characters in from the start of the text box.
I've found many jQuery auto-complete plugins but none that position the list below the current caret position.
I can get the text field position using $('#textfield').position() and I can get the caret position using something like this but that gets the character index from the text value and not the pixel position.
How can I get the current carret position of a text field relative to the page in pixels in order to position an element below it?
relaying on this anwsear: Calculate text width with JavaScript
what you can do is have a div on the screen which is visible:hidden
then every time a new charecter has been entered to the textbox change the inner html of the div
so the textbox value and the div innerhtml will always be synced.
then when you want to popup your autocomplete you will add the width of the div. to the
offset left postion of the textbox.
and thats it...
and avcorse you will need that the div and the textbox will have the same font...
This jQuery plugin does what you're after:
http://plugins.jquery.com/project/caretPosition
I haven't tested it, but going by the code it looks like it creates a temporary <span> with the same content as your <textarea> (up to the cursor) and makes wild assumptions about font, line height, whitespace and word wrapping when measuring it.
You could try extending it to:
Copy the font, line height, whitespace and word wrap styles from the target <textarea>
Hide the temporary <span> without affecting the measurement by wrapping it in a <div style="height: 0; overflow: hidden;"> or positioning it absolute -9999px, -9999px
$(this).position().top ;
$(this).position().left ;
$(this).position().right ; etc... :-)