React Js Text input cursor position for mozilla

Question

I want to set position of the cursor at end of the text. I can do that, no issues there. Problem is in mozilla. It works fine for short text. In case of long text I don't know if the cursor is being placed at the end or not. Let's assume it does cuz it works fine for short text. On google chrome if there is long text the cursor is placed at the end when onFocus is called and text sort of scrolls towards left so that end of the text is visible with the cursor.

Now, that scrolling thing should happen on mozilla but it doesn't. I need help.

Mozilla example:

Google chrome example:

https://stackoverflow.com/questions/511088/use-javascript-to-place-cursor-at-end-of-text-in-text-input-element — seunggabi, Dec 23 '19 at 06:48
Does this answer your question? [Use JavaScript to place cursor at end of text in text input element](https://stackoverflow.com/questions/511088/use-javascript-to-place-cursor-at-end-of-text-in-text-input-element) — Amar Singh, Dec 23 '19 at 06:48
@PrabhJot https://stackoverflow.com/a/56416714/5336818 I tested this answer on mozilla , text scrolls to left and shows the cursor at the end. Test it. — Amar Singh, Dec 23 '19 at 06:54
@seunggabi if the text is long it should also scroll the text — Prabh Jot, Dec 23 '19 at 06:55

score 0 · Answer 1 · answered Dec 23 '19 at 07:05

0

You have to trigger onfoucs callback
If you use jQuery

$('input[type=text]').focus(function() {
    var e = $.Event('keydown', { keyCode: 39 }); // right arrow key
    $(this).trigger(e);
});

reference: Auto arrow (right) key press event?

answered Dec 23 '19 at 07:05

seunggabi

1,699
12
12

React Js Text input cursor position for mozilla

1 Answers1