text-align: right; solo para marcador de posición?

53

/* webkit solution */ 
::-webkit-input-placeholder { text-align:right; } 
/* mozilla solution */ 
input:-moz-placeholder { text-align:right; }

Fuente

2011-07-18 07:43:55 Hnatt

+0

para cromo y ópera, ¿qué es? –

+0

AFAIK, no compatible. Prueba este arreglo de Jquery: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html – Hnatt

+3

Chrome usa webkit. –

0

¿Intentó agregarlo en el estilo?

<input type="text" name="airline_search" style="direction: ltr; text-align: right; border: none;" placeholder="ارلاین">

o simplemente establecer un div fuera así:

<div style="direction: rtl;"> 
<input type="text" name="airline_search" style="text-align: right; border: none;" placeholder="ارلاین"> 
</div>

debería funcionar.

Fuente

2011-07-18 07:41:40

+0

i quieren uso de 'dirección: LTR;' para texto, y 'text-align: right;' para marcador de posición. –

20

O intentarlo con un evento :focus:

input[type='text']{ 
text-align:right; 
} 

input[type='text']:focus{ 
text-align:left; 
}

De esta manera, cualquier marcador de posición, incluso modificable se llevará a cabo en la derecha, y cualquier tipo de texto que cuando se ha centrado estará a la derecha. Por otro lado, cuando pierde el enfoque, la alineación vuelve a ser correcta.

Fuente

2011-07-18 07:51:49

+1

gracias, esto funcionó. –

+0

Este es un buen método. Pero también hará que su texto vuelva a flotar en el centro una vez que el foco haya cambiado. –

1

El puesto de Villi Katrih es correcto, pero falla en la dirección. Debe usar:

dirección: rtl; text-align: izquierda;

'direction' afecta la colocación del texto del marcador de posición, mientras que 'text-align' afecta al contenido de la entrada.

<input type="text" placeholder="Sample" style="direction: rtl; text-align: left;">

HTH.

Fuente

2012-06-08 14:10:22 Milton

2

utilizando inline-jquery

onkeyup="if($(this).val()==''){ $(this).css({'text-align':'right'})} else{ $(this).css({'text-align':'left'})}"

Demo

Fuente

2013-12-30 08:17:11 h0mayun

16

Es mejor establecer el estilo CSS para el marcador de posición como se ha mencionado @Hnatt. Lo uso al establecer la dirección y una lista completa del selector para buscadores conocidos es

::-webkit-input-placeholder { /* WebKit browsers */ 
    direction: rtl; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    direction: rtl; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ but I'm not sure about working */ 
    direction: rtl; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    direction: rtl; 
}

Hope this help. Por favor marque como respuesta si esto es.

Fuente

2014-01-02 16:14:44 QMaster

1

input::-webkit-input-placeholder { 
    direction: rtl; 
    text-align: left; 
}

Fuente

2015-12-04 06:18:55 Thinking80s

1

::placeholder pseudo-element es todavía un borrador de trabajo y tiene un número muy limitado de propiedades CSS compatibles.

Todas las propiedades que se aplican al :: pseudo-elemento de primera línea también se aplican al pseudo-elemento :: placeholder.

No se especifican propiedades adicionales, pero se ha notado que las personas desean que text-align sean compatibles.

Por lo tanto, a partir de la lista bastante pequeña de propiedades admitidas (found here), la única forma correcta de lograr esto sería si el texto de marcador de posición tenía una sola palabra. Esto le permitiría aprovechar la propiedad admitida word-spacing al anteponer un carácter y luego ocultarlo.

Esto probablemente no funciona porque no usa prefijos del navegador.

input { 
 
    width: 200px; 
 
    background-color: #fff!important; 
 
} 
 
input::placholder { 
 
    word-spacing: 155px; 
 
} 
 
input::placholder:first-letter { 
 
    color: #fff!important; 
 
}

<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="- ارلاین">

Esto debería funcionar

input { 
 
    width: 200px; 
 
    background-color: #fff!important; 
 
} 
 
input::placholder { 
 
    word-spacing: 155px; 
 
} 
 
input::placholder::first-letter { 
 
    color: #fff!important; 
 
} 
 
/* browser support */ 
 

 
input::-webkit-input-placeholder { 
 
    word-spacing: 155px; 
 
} 
 
input:-moz-placeholder { 
 
    word-spacing: 155px; 
 
} 
 
input::-moz-placeholder { 
 
    word-spacing: 155px; 
 
} 
 
input:-ms-input-placeholder { 
 
    word-spacing: 155px; 
 
} 
 
input::-webkit-input-placeholder::first-letter { 
 
    color: #fff!important; 
 
} 
 
input:-moz-placeholder:first-letter { 
 
    color: #fff!important; 
 
} 
 
input::-moz-placeholder::first-letter { 
 
    color: #fff!important; 
 
} 
 
input:-ms-input-placeholder::first-letter { 
 
    color: #fff!important; 
 
}

<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="- ارلاین">

Pero a medida que los navegadores son compatibles cosa que no debe y no son compatibles con lo que en caso de que sólo podría probar esta.

Esto no se supone que funcione.

input::-webkit-input-placeholder { 
 
    /* WebKit browsers */ 
 
    text-align: right; 
 
} 
 
input:-moz-placeholder { 
 
    /* Mozilla Firefox 4 to 18 */ 
 
    text-align: right; 
 
} 
 
input::-moz-placeholder { 
 
    /* Mozilla Firefox 19+ but I'm not sure about working */ 
 
    text-align: right; 
 
} 
 
input:-ms-input-placeholder { 
 
    /* Internet Explorer 10 */ 
 
    text-align: right; 
 
} 
 
input::placeholder { 
 
    text-align: right; 
 
}

<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="ارلاین">

FYI direction: ltr; gestiona la posición del cursor y el flujo de texto, como un marcador de posición no tiene un cursor o el texto editable que no hará nada.

Fuente

2016-03-02 11:58:39 TarranJones

0

Puede usar este código. Con esto, puede utilizar la entrada en la dirección real automática y disfrutar del uso correcto del marcador de posición rtl.

//jQuery 
 

 
(function($) { 
 
\t $.fn.dir_auto = function() { 
 

 

 
\t \t var selector = '.inputs-nyn[dir="auto"]'; 
 
\t \t var sclass = "auto-nyn05"; 
 
\t \t var ftime  = true; 
 

 

 
\t \t if ($(selector).length) { 
 

 
\t \t \t $(document).on("keyup", selector , function() { 
 

 
\t \t \t \t if(ftime || !$(this).val()){ 
 
\t \t \t \t \t if(!$(this).val()){ 
 
\t \t \t \t \t \t $(this).addClass(sclass); 
 
\t \t \t \t \t \t ftime = true; 
 
\t \t \t \t \t } 
 
\t \t \t \t \t else{ 
 
\t \t \t \t \t \t $(this).removeClass(sclass); 
 
\t \t \t \t \t \t ftime = false; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }); 
 

 
\t \t } \t 
 
\t }; 
 
})(jQuery); 
 

 
$(document).ready(function() { 
 

 
    $.fn.dir_auto(); 
 

 
});

//css 
 

 
body{ 
 
    direction: rtl; 
 
} 
 

 
.inputs-nyn.auto-nyn05[dir="auto"] { 
 
    
 
    direction: rtl; 
 
} 
 

 
.inputs-nyn[dir="auto"]::placeholder { 
 
    text-align: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<!-- HTML --> 
 

 
<input class="inputs-nyn auto-nyn05" dir="auto" placeholder="ارلاین" type="text">

Fuente

2017-08-28 14:29:48

text-align: right; solo para marcador de posición?

Respuesta

Cuestiones relacionadas