CSS：使用ltr插入的rtl輸入元素

我在整個文檔的html標記中使用了rtl方向（用於波斯語言）。但我有一些輸入元素用於用戶名或電子郵件地址（如您所知，這些是英語，必須是ltr）。我谷歌，並找到一些自動方向的腳本。他們工作，但如果我有rtl佔位符輸入，佔位符文本也將ltr！
你能指導我嗎？
我想是這樣的：
[示例]：http://sumdroid.pe.hu/sample.jpg「請參閱本形象」CSS：使用ltr插入的rtl輸入元素

整個文檔是RTL，佔位符是RTL，但輸入元素插入的LTR。

來源

2016-01-20 Parsa

使用瀏覽器的特定僞調用佔位符應梳理你的問題出

input[type="text"]:-moz-placeholder { 
    text-align: right; 
} 
input[type="text"]:-ms-input-placeholder { 
    text-align: right; 
} 
input[type="text"]::-webkit-input-placeholder { 
    text-align: right; 
} 

.input{ 
direction: rtl; 
} 

.input:focus{ 
    text-align: left; 
    direction: ltr; 
}

來源

2016-01-20 08:50:17 Stewartside

我想他希望這些對齊 - 但很好的解決方案。 – Aravona

謝謝。但只是CSS僞代碼是有效的，解決問題。其餘的樣式在不需要的時候用這些代碼，結果會不一樣，而不是我想要的東西（如附圖所示） – Parsa

您可以用這種方式：

HTML

<input class="input" type="text" value="رمزعبور" name="" id="" onfocus="if (this.value == 'رمزعبور') {this.value = '';}" onblur="if (this.value == '') {this.value = 'رمزعبور';}"/>

CSS

.input{ 
    direction: rtl; 
} 
.input:focus{ 
    text-align: left; 
    direction: ltr; 
}

演示：http://codepen.io/mehrabi/pen/yePmEZ

來源

2016-01-20 08:53:42 coderman

謝謝。這是一個棘手的解決方案。但我的意思是使用佔位符，而不是使用值作爲佔位符。 – Parsa

CSS：使用ltr插入的rtl輸入元素

回答

相關問題