Deberías añadir a tu pregunta los intentos que has realizado... de todas formas, y tal y como dice @jorge-bowen, debes añadir la propiedad CSS direction:rtl a tu input. Sin embargo con eso no conseguirás que las palabras y las letras también se ordenen de derecha a izquierda.
Para hacer eso tienes dos opciones (una deseable y sencilla y otra que dejo como orientativa):
- Utilizar la propiedad CSS
unicode-bidi: bidi-override
:
Es la más sencilla. Con esta propiedad se modifica el flujo de los caracteres en función de la direction
indicada. En este enlace tienes más info y en este más
.reves{
unicode-bidi: bidi-override;
direction: rtl;
}
<input class="reves" type="text"/>
- Añadir JS (menos recomendable y habría que darle una vuelta):
Con este código al pulsar cualquier tecla distinta al Supr y Delete se añade al value
del input
el carácter RLM (Right-to-left-mark) con lo que la siguiente vez que se escriba el cursor estará a la izquierda del input.
function rtl(e,elt) {
if(e.keyCode != 46 && e.keyCode != 8)
{
elt.value += "\u200F";
}
else
{
elt.value = elt.value.substring(0, elt.value.length - 1);
}
}
.reves{
direction: rtl;
}
<input class="reves" type="text" onkeyup="rtl(event,this)"/>
Extra bonus
Añado aquí la respuesta a tu pregunta del comentario. En el caso de la solución CSS, aunque el input se muestre de derecha a izquierda el valor almacenado en value
sigue estando de izquierda a derecha. Para darle la vuelta puedes hacer uso de los prototypes
de Arrays
reverse y join.
let stringInvertido = document.getElementById("miInput").value.split('').reverse().join('')
Obtenemos el valor del input, los troceamos por el caracter vacío (esto nos devolverá un array
con una letra en cada posición, a continuación le damos la vuelta a las posiciones con reverse
y luego unimos con join
pasándole como parámetro el caracter vacío de nuevo.
.reves{
unicode-bidi: bidi-override;
direction: rtl;
}
<input class="reves" id="miInput" type="text" onblur="console.log('Sin darle la vuelta: ' + this.value);console.log('Tras darle la vuelta: ' + this.value.split('').reverse().join(''));"/>