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

comment le text-align: right; actif peut text-align: right; uniquement pour un espace réservé?

  

je veux utiliser la direction: ltr; pour le texte (typescript) et text-align: right; pour placeholder.

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

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

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

De cette façon, tout espace réservé, même codé en dur, sera placé à droite, et tout texte que vous tapez lorsque vous vous concentrez sera sur la droite. D’un autre côté, lorsque vous perdez le focus, l’alignement redevient correct.

Il est préférable de définir le style CSS pour l’espace réservé comme mentionné dans @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.

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

en utilisant inline-jquery

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

Démo

Le poste de Villi Kasortingh a raison, mais manque dans la direction. Tu devrais utiliser:

direction: rtl; text-align: left;

La «direction» affecte le placement de texte d’espace réservé, tandis que «l’alignement de texte» affecte le contenu de l’entrée.

  

HTH.

::placeholder pseudo-élément ::placeholder est toujours un brouillon de travail et il a un nombre très limité de propriétés CSS sockets 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.

Donc, à partir de la petite liste des propriétés sockets en charge (que vous trouverez ici) , la seule façon correcte d’y parvenir serait que le texte de votre espace réservé ne comporte qu’un seul mot. Cela vous permettrait de tirer parti de la propriété d’ 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; } 
  

as-tu essayé de l’append dans le style?

  

ou juste définir un div extérieur comme ceci:

 

devrait marcher.

Vous pouvez utiliser ce code. Par cela, vous pouvez utiliser les entrées dans la direction réelle automatique et profiter de l’utilisation d’un espace réservé rtl 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; }