text-align：right;プレースホルダーのみ？

Question

どのようにアクティブにすることができますtext-align: right;プレースホルダのみですか？

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

iは（INPUTEするタイプされた）テキストのdirection: ltr;の使用をしたい、とプレースホルダのためtext-align: right;。

Answer 1

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

Answer 2

あなたはスタイルに追加しようとしましたか？

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

か、単にこのような外部のdivの設定：

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

が動作するはずです。

Answer 3

それとも:focusイベントでそれを試してみてください。

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

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

この方法で、でもハードコーディングされた任意のプレースホルダが右側に開催されます、そして焦点を当てたときに入力するテキストは右側にあります。 一方、フォーカスを失うと、整列が再び正しくなります。

Answer 4

Villi Katrihのポストは右ですが、方向が間違っています。

方向：rtl; text-align：left;

'方向'はプレースホルダのテキストの配置に影響し、 'テキストの配置'は入力の内容に影響します。

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

HTH。

Answer 5

使用してインラインjqueryの

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

Demo

Answer 6

それは@Hnattが述べたように、プレースホルダのためのCSSスタイルを設定する方が良いでしょう。私は方向を設定することでそれを使用し、既知のブラウザのセレクタの完全なリストは

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

希望です。これが答えであればマークしてください。

Answer 7

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

Answer 8

::placeholder pseudo-elementまだワーキングドラフトであり、それは、サポートされているCSSプロパティの非常に限られた数を持っています。

:: first-line擬似要素に適用されるすべてのプロパティは、:: placeholder擬似要素にも適用されます。

追加のプロパティは述べませんが、人々がサポートされるようにtext-alignを希望指摘されています。

サポートされているプロパティのほんの少しのリスト(found here)から、プレースホルダのテキストの長さが1単語だけだった場合、これを実現する正しい方法があります。 これは、文字の接頭辞を付けて非表示にして、サポートされているword-spacingプロパティを利用できるようにします。

ブラウザプレフィックスを使用していないため、これはおそらく動作しません。

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

これは

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

を動作するはずです。しかし、ブラウザは、彼らはいけない事をサポートし、彼らはあなたがちょうど試みることができる必要があります事をサポートしていないとして、この。

これは動作しません。プレースホルダは、それが何かを習慣カーソルまたは編集可能なテキストを持っていないよう

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;は、カーソル位置とテキストの流れを管理します。

Answer 9

このコードを使用できます。 これにより、入力を実方向のautoで使用し、正しい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">