Avatar
Avatar

Reputation: 15186

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

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.

Upvotes: 0

Views: 370

Answers (1)

Brett
Brett

Reputation: 20049

Here you go:

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

Source

Upvotes: 1

Related Questions