2011-09-23 17 views
16

Para mi sitio web, necesito proporcionar soporte árabe. Parte de esto es proporcionar cuadros de texto de entrada donde, cuando el usuario escribe, los nuevos caracteres deben adjuntarse a la izquierda y el texto debe alinearse a la derecha.De derecha a izquierda Entrada HTML de texto

establecer la propiedad CSS para

text-align:right 

no funcionó, ya que no pude conseguir el cursor para venir a la izquierda y poner las cartas allí. Así que me quité esa propiedad y añadió

direction:RTL 

Aquí, el cursor se llegó a la izquierda y el texto se alinea a la derecha. pero los personajes recién agregados no se anexaban a la izquierda. En vez de eso, solo se agregaban al extremo derecho.

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

Por ejemplo, mira el cuadro de búsqueda de la página de google arabic. Necesito el comportamiento exacto, aunque no con los de fantasía icono del teclado, etc., http://www.google.com/webhp?hl=ar

+0

Normalmente TEXTO AQUÍ haría exacly eso, sino que al recibir el texto de una forma o de tal, no va a funcionar. –

+0

¿Podría publicar su solución? –

Respuesta

21

Esto es lo que ocurre:

  • Uso direction:RTL para la alineación a la derecha
  • escribir un controlador JavaScript unido a la evento: "onkeyup", que realiza el desplazamiento del carácter ingresado a la IZQUIERDA (haciendo algo de procesamiento de texto).
+1

Funcionó a la perfección :) –

+1

Ahmed ¿podría compartir la forma en que logró resolverlo? –

+1

Un violín sería bueno. Gracias –

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




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

Este código va a hacer.

4

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

13

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

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

Utilícelo en la entrada en css.

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