text-align：right;僅用於佔位符？

53

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

來源

2011-07-18 07:43:55 Hnatt

+0

，它是什麼？ –

+0

AFAIK，不支持。試試這個Jquery修正：http：//www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html – Hnatt

+3

Chrome使用webkit。 –

0

您是否嘗試將其添加到樣式中？

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

應該工作。

來源

2011-07-18 07:41:40

+0

我想使用的 '方向：LTR;'爲文字，'文字對齊：正確';佔位符。鉻和歌劇的 –

20

或者用:focus事件試試吧：

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

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

這樣，即使硬編碼的任何佔位將於權，任何文本您類型時，重點將是正確的。另一方面，當你失去焦點時，對位再次變得正確。

來源

2011-07-18 07:51:49

+1

謝謝，這工作。 –

+0

這是一個好方法。但是在焦點發生變化之後，它也會將文字浮回到中央。 –

1

絨毛Katrih的職位是正確的，但在方向錯過。您應該使用：

方向：RTL; text-align：left;

「方向」影響佔位符文本位置，而「文本對齊」影響到輸入的內容。

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

HTH。

來源

2012-06-08 14:10:22 Milton

2

採用直列jQuery的

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

Demo

來源

2013-12-30 08:17:11 h0mayun

16

這是更好地設置CSS樣式佔位符@Hnatt提及。我設定的方向和選擇的已知瀏覽器的完整列表，用它

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

希望這有助於。如果是這樣，請標記爲答案。

來源

2014-01-02 16:14:44 QMaster

1

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

來源

2015-12-04 06:18:55 Thinking80s

1

::placeholder pseudo-element仍是一個工作草案，並具有支持的CSS屬性的數量非常有限。

適用於:: first-line僞元素的所有屬性也適用於:: placeholder僞元素。

沒有聲明附加屬性，但已經注意到人們會支持text-align。

所以從支持的屬性(found here)的相當小的列表，你可以做到這一點的唯一正確的方法是，如果你的佔位符文本是隻有一個字長。這將允許您通過爲字符加前綴並隱藏它來利用受支持的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;管理光標位置和文本流，作爲一個佔位符不具有光標或可編輯的文本，它不會做任何事情。

來源

2016-03-02 11:58:39 TarranJones

0

您可以使用此代碼。由此您可以使用真實方向自動輸入並享受使用正確的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">

來源

2017-08-28 14:29:48

text-align：right;僅用於佔位符？

回答

相關問題