Best way to add typed numbers in front of the text of an HTML5 input field?

Question

For an input field I need to achieve that each number inserted has to go in front of the input field.

Example: Typed 9, 5, 1 should give 159.

I hoped for a solution with HTML5 (such as dir="rtl") but could not find one.

Only by using Javascript there seems to be a solution:

var elem = document.getElementById(elemId);
elem.focus();
elem.setSelectionRange(0, 0);

which I implemented in Jquery:

$('input').keyup( function(e) {
    $(this)[0].setSelectionRange(0, 0);
});

Note: The input field has to be type="text". The type="number" will not work!

Another way of how to achieve this could be removing the focus from the field and setting the focus again.

However, I am still trying to find a solution purely based on HTML5.

score 1 · Answer 1 · answered Oct 01 '18 at 12:36

1

Here you go:

input {
  unicode-bidi:bidi-override;
  direction: RTL;
}

answered Oct 01 '18 at 12:36

Brett

1

My feeling was right. Fantastic that there is a pure HTML5 solution. It works great: https://jsfiddle.net/kai_noack/c83rfu26/ – “The unicode-bidi CSS property, together with the direction property, determines how bidirectional text in a document is handled.” Now I can even use the input type `number`. – Avatar Oct 01 '18 at 12:57
Ah, too happy to early. There is a problem. Typing 9, 5, 1 displays `159` but the value in the input field is `951`. – Avatar Oct 01 '18 at 13:07
Can you manipulate the value when you retrieve it on the backend? I'm not sure you can manipulate the actual "value" without JS. – Brett Oct 01 '18 at 17:21
Yes, backend was my idea too. However, my recent solution is using Javascript and have "correct values" frontend. – Avatar Oct 02 '18 at 07:10
1

I'd be careful using JS to manipulate the values if you're assuming you're going to get the correct values on the backend, as obviously there may be a select few with JS disabled - that is if you can still submit the form without JS. – Brett Oct 02 '18 at 18:50

1 Answers1