2011-12-08 10 views
6

¿Cómo puedo mostrar los números negativos en el cuadro de texto de derecha a izquierda, con el signo menos a la izquierda del número?Ingresar menos en el cuadro de texto RTL

Estado actual: 1-
estado deseado: -1

+2

¿Cómo lo está haciendo de derecha a izquierda ... con dirección CSS: rtl? –

+0

@SirCrispalot, Sí ** señor ** ... ;-) – gdoron

+1

¿Podría darnos un ejemplo del marcado que se produce? –

Respuesta

8

En el cuadro de texto sólo tiene que restablecer el direction, y alinear el texto a la derecha:

BODY { 
    direction: rtl; 
} 
#myInput { 
    direction: ltr; 
    text-align: right; 
} 

Example fiddle here

+0

¿Por qué no cambiaré todos los cuadros de texto y etiquetas al estilo #myInput? ¿Cuál es la diferencia entre la dirección rtl luego text-align: ¿verdad? – gdoron

+0

'# myInput' era solo un ejemplo. Debería cambiar el selector de CSS para que coincida con lo que requiera su código. En cuanto a la diferencia, verifique esta pregunta: http://stackoverflow.com/questions/8430148/differences-between-direction-and-text-align-in-css –

+0

Sí, leí esta pregunta, me encantó esa pregunta ... * * =) ** ¡Gracias! – gdoron

8

Este es un problema general con RTL/LTR cuando se trata de contextos en la interfaz de usuario.

Respuesta corta: El mejor enfoque es dedicar entradas numéricas y entradas de cadena a cuadros de texto separados. Los números para la mayoría de los lenguajes RTL (no todos, ¡cuidado!) Son LTR, y las cadenas son RTL, y dividir el contexto le permite definir sus entradas correctamente.

Ejemplo -

Place: <input type="text" dir="rtl" /> 
Temperature: <input type="number" dir="ltr" /> 

Nota que el W3C recomienda configurar el idioma en el formato HTML en lugar de la CSS, que también es mejor para la accesibilidad y la pantalla lectores. También se recomienda agregar un atributo lang = "", si es posible.

Hay varias buenas razones para dividir cuadros de texto para cadenas y números por separado cuando sea posible, especialmente para RTL/LTR:

  • Esto suele ser una buena decisión UX, ya que hace más claro a su usuario lo que se espera que escriban.
  • Obtiene una distinción clara en su código (o lo que sea que analice los campos de formulario) sobre qué es una cadena y qué es una entrada numérica, para cualquier cálculo o problema de visualización.
  • Al mostrar los resultados, puede asegurarse de que el número y el texto se muestran correctamente (utilizando <span dir="ltr">...</span> o dir="rtl" cuando sea pertinente)
  • Definición de una entrada como numérica permite a los dispositivos móviles para cargar el teclado numérico en lugar del teclado completo, que es una ventaja para UX.

Sé que esta pregunta tiene varios años, pero espero que esto pueda ayudar con las nuevas consideraciones (y algunas actualizaciones tecnológicas, especialmente móviles) a cualquier persona interesada en dar soporte a direcciones RTL o mixtas en sus formularios.

Cuestiones relacionadas