web-dev-qa-db-fra.com

text-align: right; seulement pour l'espace réservé?


comment active text-align: right; uniquement pour un espace réservé? 

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

je veux utiliser direction: ltr; pour le texte (qui a été saisi pour entrer), et text-align: right; pour un espace réservé.

htmlcssplaceholder
47
Me hdi
/* webkit solution */
::-webkit-input-placeholder { text-align:right; }
/* mozilla solution */
input:-moz-placeholder { text-align:right; }
65
Hnatt

Ou essayez-le avec un événement :focus:

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

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

De cette manière, tout espace réservé, même codé en dur, sera placé à droite et tout texte tapé une fois le texte concentré sera placé à droite ... Par contre, lorsque vous perdez le focus, l'alignement redevient exact.

20
monsieur_h

Il est préférable de définir le style CSS pour l'espace réservé comme indiqué par @Hnatt. Je l'utilise en définissant la direction et une liste complète de sélecteur pour les navigateurs connus est 

::-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;
}

J'espère que cette aide. S'il vous plaît marquer comme réponse si c'est.

18
QMaster
input::-webkit-input-placeholder {
    direction: rtl;
    text-align: left;
}
3
Thinking80s

en utilisant inline-jquery

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

Démo

2
h0mayun

::placeholder pseudo-element est toujours un brouillon et possède un nombre très limité de propriétés CSS prises en charge.

Toutes les propriétés qui s'appliquent au pseudo-élément :: first-line s'appliquent également au pseudo-élément :: placeholder.

Aucune propriété supplémentaire n'est indiquée, mais il a été noté que les utilisateurs souhaiteraient que text-align soit pris en charge.

Ainsi, à partir de la liste assez restreinte des propriétés prises en charge (trouvée ici) , la seule façon correcte d’y parvenir serait de faire en sorte que le texte de votre espace réservé ne comprenne qu'un seul mot. Cela vous permettrait de tirer parti de la propriété Word-spacing prise en charge en préfixant un caractère puis en le masquant.

Cela ne fonctionne probablement pas car il n'utilise pas les préfixes du navigateur.

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="- ارلاین">

Cela devrait marcher

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="- ارلاین">

Mais comme les navigateurs supportent ce qu’ils ne devraient pas et qu’ils ne devraient pas, vous pouvez simplement essayer. 

Ce n'est pas censé fonctionner.

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; gère la position du curseur et le flux de texte, puisqu’un paramètre fictif n’a pas de curseur ni de texte modifiable, il ne fait rien. 

1
TarranJones

Le poste de Villi Katrih est juste, mais manque dans la direction. Tu devrais utiliser:

direction: rtl; text-align: left;

'direction' affecte l'emplacement du texte de l'espace réservé, alors que 'text-align' affecte le contenu de l'entrée.

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

HTH.

1
Milton

Vous pouvez utiliser ce code . De cette manière, vous pouvez utiliser une entrée dans la direction réelle de l’auto et profiter de l’utilisation du paramètre fictif correct.

//jQuery

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


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


		if ( $(selector).length ) {

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

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

		}	
	};
})(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">

0
hossein ghaem

avez-vous essayé de l'ajouter dans le style?

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

ou simplement définir une division extérieure comme celle-ci:

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

devrait marcher.

0
Villi Katrih