1

Basically I have an input text (I am actually working in react, but probably the solution would be the same or very similar in plain html5-javascript) and I want that the text cursor remains on the right permanently when the users clicks on it, and that, even if the users clicks in another position of the input's content once he wrote something, the text cursor is still moved instantly to the right end.

I tried different solutions I found around but nothing seems to work.

I tried using the onFocus event passing a function like this as suggested in some questions on this site:

repositionCursorToTheRight = (e) => {
    const val = e.target.value;
    e.target.value = '';
    e.target.value = val;
};

with the idea that resetting the input would force the text cursor to reset its position, but it doesn't happen (not in firefox at least).

I tried working with event.target.selectionStart and event.target.selectionEnd setting them to different values like the full lenght of the input value, 0, etc... but that seems too to have no effect at all.

Any ideas?

Edit: I'll explain better the reasons and give an example, I just want to specify this is a client business request and I cannot override it. So I need this because I have an input form which must have 2 fixed decimals which must be always showed even if at zero. The client want a form like those of most currency converters apps in which if the user wants to write, for example, 12.35 it should see in order 0.00(default value) -> 0.01 -> 0.12 -> 1.23 -> 12.35. Hope it is clear now

Yulaow
  • 61
  • 7
  • "*[Even] if the users [click] in another position of the input's content once he wrote something, the text cursor is still moved instantly to the right end.*" - and why do you want to deliberately frustrate your users with this unintuitive, and confrontational, user interface? – David Thomas Aug 23 '19 at 11:14
  • Does this imply you want to force the user to always retype the entire word instead of being able to add letters in between? What if the user uses the keyboard arrows to move the cursor instead of clicking? You can do this with the selectionRange, as you mention, but I'm rather curious what the use case for this is as well, since you basically want to break behaviour people have been used to for years. – Shilly Aug 23 '19 at 11:15
  • @DavidThomas It's not my decision but I have to implement it because it is a request from "the business above", I cannot contest it because the client specifically asked for it. Basically they have a form in which in a input they want the users to insert numbers with exactly 2 fixed decimals (which must be always visible, even if all set to 0s) and they think a nice solution is that to write the number always from the right, like it happens in most calculators apps. – Yulaow Aug 23 '19 at 11:17
  • 1
    Are you trying to achieve right-to-left text entry? You can add attribute `dir="rtl"` to a text input to do so. Maybe just clear the entry if click is detected anywhere to reset carat. Else textRange might be able to help here: https://stackoverflow.com/a/6249440/2244284 – Gavin Aug 23 '19 at 11:20

1 Answers1

0

You can test with this, I have tested this in Chrome, Edge, Firefox and IE 11.

<script>

    // Get all inputs
    var inputs = document.querySelectorAll('input');

    // Add event listeners
    for (var i = 0; i < inputs.length; i++)
    {
        inputs[i].addEventListener('focusin', resetCursor, false);
        inputs[i].addEventListener('click', resetCursor, false);
    }

    // Reset a cursor to the end
    function resetCursor(event)
    {
        setTimeout(function () { event.target.selectionStart = event.target.value.length; }, 10);

    }
</script>
Fredrik Stigsson
  • 383
  • 1
  • 9