Right to Left Text HTML Input

Right to left Text HTML input

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

How to handle right-to-left text-input fields the right way?

You can try this solution from here

Example http://jsfiddle.net/0w5rydrL/1/

The html

<div class="text_direction" dir="rtl">
    <input type="text" onkeyup="rtl(this);" />
</div>

The javascript function

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

How to align texts inside of an input?

Use the text-align property in your CSS:

input { 
    text-align: right; 
}

This will take effect in all the inputs of the page.

Otherwise, if you want to align the text of just one input, set the style inline:

<input type="text" style="text-align:right;"/>

How to change input text direction from right to left

You can rotate text container

CSS

.text-rotated {
   transform: rotate(180deg)
}

Or another way in JS

var p = document.querySelector('p');

var reversed = p.innerText.split('').reverse().join('');

p.innerText = reversed;

Example JSFiddle

CSS: rtl input element with ltr insert

Using the browser specific pseudo calls to the placeholder should sort your issue out

input[type="text"]:-moz-placeholder {
    text-align: right;
}
input[type="text"]:-ms-input-placeholder {
    text-align: right;
}
input[type="text"]::-webkit-input-placeholder {
    text-align: right;
}

.input{
direction: rtl;
}

.input:focus{
  text-align: left;
  direction: ltr;
}