css - tablas - Entrada de texto HTML de derecha a izquierda

formulario html ejemplo

Question

Para mi sitio web, necesito proporcionar apoyo árabe. Parte de esto es proporcionar cuadros de texto de entrada donde, cuando el usuario escribe, los nuevos caracteres deben agregarse a la izquierda y el texto debe estar alineado a la derecha.

estableciendo la propiedad css a

text-align:right

no funcionó, ya que no podía hacer que el cursor viniera a la izquierda y agregar letras allí. Así que quité esa propiedad y agregué

direction:RTL

Aquí, el cursor vino a la izquierda y el texto estaba alineado a la derecha. pero los personajes recién agregados no fueron agregados a la izquierda. En su lugar, se estaban añadiendo al extremo derecho solamente.

¿Cómo puedo solucionar esto? por favor ayuda..

Por ejemplo, vea el cuadro de búsqueda de páginas árabes de google. Necesito el comportamiento exacto, aunque no con el ícono del teclado elegante, etc., http://www.google.com/webhp?hl=ar

Answer 1

Esto es lo que puedo pensar:

• Utilice la direction:RTL para la alineación DERECHA
• Escriba un controlador de JavaScript adjunto al evento: "onkeyup", que realiza el desplazamiento del carácter ingresado a la IZQUIERDA (haciendo un procesamiento de texto).

Answer 2

Puede usar el dir = "rtl" en la entrada. Es compatible.

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

Answer 3

Una característica específica del material angular, además de la dirección: rtl, es:

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

Esto funcionará tanto para RLT como para LTR.

Answer 4

Usar en la entrada en css.

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

Answer 5

Use solo la direction:RTL y cuando se cambie a un teclado adecuado (por ejemplo, árabe) en la configuración del sistema, los nuevos caracteres agregados se agregarán correctamente a la izquierda.

Answer 6

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




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

Este código servirá.