last day (15 days later) » 

5:10 PM
2
A: Why Is My Contenteditable Cursor Jumping to the End in Chrome?

dutziI don't know why this happens, but I had the feeling it has something to do with the sizing of the <div>, so I tried playing with the display property. After setting it to inline-block and playing a little with the text I found that the issue is gone after I make some edits to it, specifically ad...

 
Nice answer! This is what I was looking for, just without hacky JS. It's too bad about the arrow navigation, but this will do just fine
 
@salniro A good 20 hours before this answer was posted, my answer already had a solution that hinges on the same principle, using inline-block to prevent the caret jump. My solution does not need to use <br/> because I've left the outer div as a block element (which is not unreasonable given that changing the outer element to an inline block is going to change how this element behaves in its surrounding context, which is an unnecessary side effect).
 
@Louis Your effort is appreciated, but this answer more closely replicates the behavior I was after. In your example, I get a small inner <div> which I must spend effort trying to click into precisely. Chrome also gives this <div> am undesirable focus style. In this example, I can click anywhere into the area and get the focus and cursor immediately. Surely you're answer can get an upvote, this one just happens to be preferable given my needs. Thank you anyways.
 
@salniro I cannot reproduce any of the issues you mention.
 
5:10 PM
@salniro I bet you are looking at the old fiddle, not the one after I edited in response to comments.
 
hey
that link is not updated
I manually checked if there was a /1/ and I see it, your answer never got the update so I followed the fiddle I saw
 
I forked from the old one. It is cleaner that way.
 
I dont think you ever updated the link
is this the one? jsfiddle.net/wtud605q/1
 
If I go to my answer, select the link and copy it, this is the URL: jsfiddle.net/wtud605q
There is no "/1" a the end.
 
okay, but then, this one is still producing those errors I sent the imgr link for
click in the big white area
 
5:13 PM
Yes, I do that and I can't reproduce the error.
 
better yet
click into, so you have cursor, type, delete, then click in white area.. there is odd behavior
in my question, i need this to work if there is "no text" in from of the span
really?
see my updated step please
 
Also, I've updated the CSS to clearly separate the spans (there is no additional space in the HTML; but there is an additional space in the CSS rendering so that the caret shows). So if you look at it without doing anything. You should see this:
With the extra space between the spans. (Which is there only to see the caret better when it is betwen them. It has no bearing on function.)
 
try typing in front of last span, delete the text, click into the larger white area, then try to get cursor back
it does the disappearing
 
What do you mean by "click in front of last span?" Between the last and the previous one?
 
okay sorry, let me try to explain this carefully
run fiddle, click into did, type "123", delete "3" delete "2" delete "1"
so there is no text... then
click below it... anywhere in the white area
cursor disappears. I need this whole div to rendered as "editable" to the user
so theyre clicking... no cursor
 
5:20 PM
I think I'm seeing what you mean.
 
i need to click into that "little editable area" to kind of get the experience back
 
Was not clear in the comment, because clicking before entering anything does not show this behavior.
 
it never is, I have a tough time explaining this example and I'm sorry if it came off as unclear
 
It could be fixed by expanding inner div to take the same space as the outer one.
 
just tried, height 100% width 100% and cursor jumps to end
 
5:24 PM
You do need the <br/> then.
 
yea :/ nothing seems to fix the arrow key issue though
cursor is always there, if you type.. it's in right spot, just never shows as it should
 
As I've said in my answer ultimately, if you want to coerce the caret to your will, there's no solution short of taking it completely over. If you don't, then you patch here and there's a problem there, you patch there and there's a problem here, etc.
 
enter contenteditable. Seriously it's been a pain. For some reason the arrow problem is not hurting me in my app. I'm compiling dynamic content with angular and injecting it in the div. Somehow the cursor works at that point, but with a vanilla example I have no idea a good way to solve it
 
At any rate, now that I know what the behavior you saw is exactly, I can see why you prefer the other answer. I'm going to delete my comments.
 
Thanks again for your efforts Louis take care
 
5:29 PM
Have a nice day!
 

last day (15 days later) »