Right to left Text HTML input

Question

For my website, i need to provide arabic support. Part of it is to provide input textboxes where when user types in, the new characters have to be appended to the left and t

Answer 1

Here's what I can think of:

• Use direction:RTL for the RIGHT alignment
• Write a JavaScript handler attached to the event: "onkeyup", which performs the shifting of the entered character to the LEFT (doing some text processing).

Answer 2

A feature specific to Angular Material, in addition to direction: rtl, is :

.mat-form-field {
   text-align: start!important;
 }

This will work for both RLT & LTR

Answer 3

function rtl(element)
{   
    if(element.setSelectionRange){
        element.setSelectionRange(0,0);
    }
}




<input type="text" name="textbox" style="direction:RTL;" onkeyup="rtl(this);"/>

This code will do.

Answer 4

You can use the dir="rtl" on the input. It is supported.

<input dir="rtl" id="foo"/>

Answer 5

Use on the input in css.

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

Answer 6

It works for Chrome browser.
Use a div element and make it editable.

    <div contenteditable="true">
    </div>