CODEWITHSUNDEEP
cssinputarabicright-to-left
Anand
Anand

Reputation: 10400

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

Upvotes: 49

Views: 124815

Answers (9)

Sarath S Menon
Sarath S Menon

Reputation: 2331

A better, more user-friendly way to do this is to set the dir attribute to auto.

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

This way if a user enters English text it will be left-aligned and if he enters Arabic text it will be right-aligned automatically

See here for more information on the dir attribute

Upvotes: 5

Deep Bisht
Deep Bisht

Reputation: 81

Simply use this CSS, this will change your text field and cursor position from right to left.

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

Upvotes: 8

Vishesh
Vishesh

Reputation: 7

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

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

Upvotes: -1

Qamar Al Zaman Habeek
Qamar Al Zaman Habeek

Reputation: 71

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

Upvotes: 5

haibnu
haibnu

Reputation: 41

Use on the input in css.

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

Upvotes: 3

Nicholas Mayne
Nicholas Mayne

Reputation: 1754

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

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

Upvotes: 67

Martin Grůber
Martin Grůber

Reputation: 783

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.

Upvotes: 5

Anshul
Anshul

Reputation: 806

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.

Upvotes: 9

Saket
Saket

Reputation: 46137

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

Upvotes: 40

Related Questions