web-dev-qa-db-ja.com

テキスト揃え：右;プレースホルダーのみ？


プレースホルダーに対してのみtext-align: right;をアクティブにするにはどうすればよいですか？

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

テキスト（inputeに入力された）にdirection: ltr;を使用し、プレースホルダーにtext-align: right;を使用したい。

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

または、:focusイベント：

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

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

これにより、ハードコーディングされたプレースホルダーも右側に保持され、フォーカスされたときに入力したテキストは右側に配置されます。一方、フォーカスを失うと、アライメントは再び正しくなります。

21
monsieur_h

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

この助けを願っています。これに該当する場合は、回答としてマークしてください。

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

inline-jqueryを使用する

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

デモ

2
h0mayun

::placeholder pseudo-element はまだ草案であり、サポートされているCSSプロパティの数は非常に限られています。

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

追加のプロパティは記載されていませんが、人々はtext-alignサポートされる。

そのため、サポートされているプロパティのかなり小さなリスト （こちら） から、これを達成できる唯一の正しい方法は、プレースホルダーテキストが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="ارلاین">

参考までにdirection: ltr;は、カーソルの位置とテキストの流れを管理します。プレースホルダーにはカーソルや編集可能なテキストがないため、何も実行されません。

1
TarranJones

Villi Katrihのポストは正しいが、方向を見逃している。以下を使用する必要があります。

方向：rtl;テキスト揃え：左;

「方向」はプレースホルダーのテキストの配置に影響し、「テキスト整列」は入力のコンテンツに影響します。

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

HTH。

1
Milton

このコードを使用できます。これにより、入力を実際の方向に自動で使用し、正しいRTLプレースホルダーを使用することができます。

//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

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

<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>

動作するはずです。

0
Villi Katrih