Right to left Text HTML input

问题

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 the text has to be right aligned.

setting the css property to

text-align:right

didn't work, as i could not get the cursor to come to the left and add letters there. So I removed that property and added

direction:RTL

Here, the cursor came to the left and text was right aligned. but the newly added characters were not getting appended to the left. Instead they were getting appended to the right end only.

How do I fix this? please help..

For example, see the google arabic page search box. I need the exact behavior, although not with those fancy keyboard icon etc., http://www.google.com/webhp?hl=ar

回答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).

回答2:

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

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

回答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.

回答4:

Use only direction:RTL and when switched to a proper keyboard (e.g. Arabic) in the system settings, the newly added characters will correctly be appended to the left.

回答5:

Use on the input in css.

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

回答6:

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

回答7:

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

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

来源：https://stackoverflow.com/questions/7524855/right-to-left-text-html-input

标签

css

input

arabic

right-to-left