1

In my project I am using a "contenteditable" div. I am trying to create an autocomplete functionality by using this div. Whenever I type any words, some suggestions should be visible in a different div. And when I press ENTER, the selected suggestion should be replaced with the entered text in the "contenteditable" div. Then when I press SPACE, further suggestions should be visible.

For a clearer explanation, please see this fiddle.

In the fiddle, type some letters and then press ENTER then SPACE.

Whenever I press SPACE, an alert box (for testing) will be displayed. This tells the current position of the caret in the "contenteditable" div.

But when I press ENTER and then SPACE, the current position of the caret is wrong, i.e. 0.

As far as I understood, if I don't use the placeCaretAtEnd() function then I am getting the caret position correctly. But in my case I want to use both (getCaretPosition() and placeCaretAtEnd()).

I am checking this in Firefox. (In Chrome, it seems to be working properly)

I need a solution that works in IE8+, Chrome and Firefox. Please help.

Community
  • 1
  • 1
Mr_Green
  • 40,727
  • 45
  • 159
  • 271
  • Encountered the same problem on Firefox, it took me a long while to find where the problem locates. Seems like a bug of Firefox.. Did you find a easy solution at last? – jiyinyiyong May 29 '13 at 14:24
  • @jiyinyiyong yes check the below answer. It perfectly solved my problem. :) – Mr_Green May 29 '13 at 14:26
  • Glad to find it works. But as I copied the code as `placeCaretAtEnd2()` function and replaced my old version, it remains to get a caretPosition at `0`. I tried to `console.log` the result I got by `getcaretPosition` imediately after `placeCaretAtEnd` it, found it to be `0` rather than a integer `>0`. Thanks anyway. Could you show me the version of Firefox where it works so I can try one more time? – jiyinyiyong May 29 '13 at 15:12
  • @jiyinyiyong come to [chat room](http://chat.stackoverflow.com/rooms/23760/sencha). if you have time. – Mr_Green May 29 '13 at 16:12

2 Answers2

2

You need a more sophisticated means of getting the caret position that works with all the text in the editable div. You could use code from this question, although I'm not quite sure what you're trying to achieve. You may have problems stemming from the fact that the code does not take into account lin breaks implied by <br> and block elements.

Demo: http://jsfiddle.net/BN5N6/12/

Community
  • 1
  • 1
Tim Down
  • 318,141
  • 75
  • 454
  • 536
1

Sorry I can't give you a complete answer. I'd post this as a comment only I don't have comment rights. Having played with your fiddle, I noticed that in Firefox (only browser I tested in) after I pressed Enter the "result" div would have an additional child text node. This wasn't a result of your placeCaretAtEnd function. It appears to be something that Firefox does for you when you hit enter.

It looks like the 0 that you're getting in the console is the position of the caret in the new text node that the browser created for you. If, after pressing enter, you click in the original text node and press space, the console will give you the correct caret position (once again, relative to the text node the cursor is in).

Jordan Wilcken
  • 316
  • 2
  • 10