Wysiwyg-editor: Focus cursor at the end of input

[vahtel]

It would be nice when calling $('#edit').editable("focus") it would place the cursor at the end of line. This is the place where users usually add new content.

Demo: http://jsbin.com/lajuni/2/

[philfreo]

disagree that this should be the default behavior. that's not how most other UI (e.g. textareas) works.

[vahtel]

I'm thinking more of a use case with content editable area, where the user has multiple paragraphs of text. Example, the user typed a description, saved and came back and now wants to continue.

I'm coming from http://xing.github.io/wysihtml5/ and this is the default behavior.

Maybe make it as an option ?

[stefanneculai]

It would be odd to focus at the end of the editable area instead of the beginning for 2 reasons:

1. Most of the the apps (web, desktop, mobile) are focusing at the beginning, not at the end. It will be odd for the users to see focus at the end.
2. If the area has scroll, it should scroll to the end which would turn into a strange movement of the content.

Sorry, but we'll not add an option for this.

PS: I checked wysihtml5 and it seems that they are focusing at the beginning too. At least in Safari.

[shime]

Is there a way to focus on the back of the input at all now?

[stefanneculai]

There is no builtin method for doing that. If you want such a behaviour you should implement your own method.

[shime]

As a matter of fact, there is: $('#edit').editable('setFocusAtEnd')

[stefanneculai]

That method was not created for setting focus at the end of the input, but at the end of a block tag. There might be cases when it will not work correctly if you use it for setting focus at the end of the editable area. That's the reason why it doesn't appear in the official documentation.

[DrewZuk]

Is there still no way to do this? It is a feature that would be useful in many contexts. I can't do any basic selection options on the inline editor at all - not very intuitive.

[danielme85]

i would like to see something like this implemented in v2 actually. I need this because the cursor get stuck after an image insert if inline is set as default.
Now if the image insert was fixed then I would not need this, however I agree with the people here making the request because why not support it? Default behavior no... but a supported method yes please :)

[stefanneculai]

In v2 you can use the following:

var editor  = $(selector).data('froala.editor');
editor.selection.setAtEnd(editor.$el.get(0));
editor.selection.restore;

[danielme85]

thank you for the fast response @stefanneculai !
Nice tip and good to know.

PS: Still struggling a little with image inserts, however that is not related to this issue (sorry).
I will make sure to test it on a clean setup and open a new issue if needed.
Thanks!

[jpcamara]

I know this is an old/closed issue, but despite the answer from @stefanneculai I was still unable to achieve this until I made sure the editor was focused first. If the editor isn't focused already, make sure you call

editor.events.focus()

before calling the selection methods.

[connect-technologies]

@jpcamara thanks. saved my day :)

[MikeCaputo]

@stefanneculai and @jpcamara , thank you for the code snippets! I was stumped until I made one change to the final line; I needed to call it as a method:
editor.selection.restore();