Move Cursor to editable DIV End

[jj]

Hi there,

first of all a big thumbs up for this amazing library. thanks to tim !

my issue is that i am not able to place the caret simply to the end
of an editable div.

i tried the following

var el = document.getElementById("edit");
var range = rangy.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = rangy.getSelection();
sel.setSingleRange(range);

in Chrome the caret is placed about 7 characters left of the end,
while FF displays the caret at the end of the first line.

can someone point me to the right direction ?

thanks, jay

[Nico Burns]

Hmm... that is odd, as far as I can see that should work...

Do you still have the same problem using a pure JavaScript solution? (the second answer to the question linked to below)

http://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity/3866442#3866442

It might also be worth checking what is selected if you remove the collapse line. (to help see where the problem is).

Nico

[jj]

hi, yes still the same issue with the solution you provided,
so it's not a rangy related problem.

this is the concerned html

<div id="edit" class="editor" contenteditable="true">
<span class="BlueI">Big Big Test</span>
<span class="Red" contenteditable="false">ROYAL WITH CHEESE</span>
<span class="BlackI">LOREM SDKLKN ahdfg ardfgijj +++++</span>
</div>

i make use of a custom font, but that doesn't really matter... or does
it ?

this binding to rangy's position module enables me to show a custom
caret

$('div#edit').bind('keyup click', function(){

showSelectionPosition();
});

thanks a ton for your help


J

On 22 Dez., 16:38, Nico Burns <n...@nicoburns.com> wrote:
> Hmm... that is odd, as far as I can see that should work...
>
> Do you still have the same problem using a pure JavaScript solution? (the
> second answer to the question linked to below)
>

> http://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-...

[jj]

...omitting the collapse to end shows the correct selection (complete
content of editor div).

[Nico Burns]

Well I'm puzzled - it seems to work fine for me  http://jsfiddle.net/Gyxkk/5/  (I tested in Chrome)

I don't think custom fonts should make any difference (I've been using them in my editor for several months without problems). However, if you are you are using other css3 styles such as :before or :after, then these may be causing problems. Webkit at least struggles when mixing these with contenteditable.

Is there anything else which could be interfering, or running at the same time?

I don't suppose it's possible to see your live code? As otherwise I will struggle to help you more, not being able to reproduce the problem

[jj]

Your example reproduces the problem exactly for me in FF 8 (windows
and linux).

In FF pressing the "Select End" button won't focus the editor div
(contrary to chrome)
After activating it by clicking, the blinking caret shows up in the
upper
right corner, not at the end of the last character.
When i start typing, it jumps to the end, as supposed.
I found out that this behaviour can be avoided by adding a &nbsp;
behind the
last </span>. Is this a bug in FF ?

In Konqueror (Safari engine) the caret rests behind the second "Big",
reproducible,
but also unpredictable and arbitrary.
















It does work in webkit though.

[Nico Burns]

Ok, updated JSfiddle: http://jsfiddle.net/Gyxkk/41/

I added elem.focus() to the function, which makes the button work in Firefox.

As to the cursor being in the wrong place (firefox), this seemed to be being caused by a newline character (\n) being placed at the end of the line. This was solved by putting text after the last span, but obviously this may not be possible in practise. It was also solved by removing the whitespace between the last </span> and the </div>. In practise, perhaps running a replacement regex over the content to replace all newlines might be the best way to go (or just make sure there are no newlines in the default content, as I don't think they can be easily inserted by the user.

I'm afraid I don't have access to Konqueror at the moment, but chrome works fine for me and that's also webkit...

Nico

[jj]

Thanks for looking into this ! after removing newlines from my
testpage it worked,
(nevertheless just for curiousity i am wondering whether the newline
issue
can be overcome within rangy, since the library is not involved here)

My usecase demands for a custom cursor. I decided to abuse the PosRect
Markers
in order to display a static cursor image on top of the system caret
pipe.
I can do this by calling showSelectionPosition() (on keyup+click) from
the position demo.
It works fine, the custom caret image is following the system caret,
but not at the beginning,
when i want to cursor at the end of the div.

I'm getting errors around row 211 in rangy-position.js
(rangeSupportsGetClientRects)
Unfortunately i dont know about native ranges etc. so i'm not able to
track this down.

rect is undefined
return { x: rect.right, y: rect.bottom };
rangy-position.js (Zeile 235)

it seems like the range is getting lost after leaving the function
setEndOfContenteditable()

any ideas ?

JJay

[jj]

actually i just need the pixel coordinates of the caret, which
corresponds to a
collapsed range.