CSS：带有 ltr 插入的 rtl 输入元素答案

【问题标题】：CSS: rtl input element with ltr insertCSS：带有 ltr 插入的 rtl 输入元素
【发布时间】：2016-01-20 08:36:20
【问题描述】：

我在整个文档的 html 标记中使用了 rtl 方向（用于波斯语）。但是我有一些用户名或电子邮件地址的输入元素（如您所知，这些是英文，必须是 ltr）。我谷歌并找到一些用于自动定向的脚本。他们工作，但如果我有 rtl placeholder 输入，占位符文本也将是 ltr！
你能指导我吗？
我想要这样的东西：
[sample]: http://sumdroid.pe.hu/sample.jpg "please see this image"

整个文档是rtl，占位符是rtl，但是输入元素insert是ltr。

【问题讨论】：

标签： html css

【解决方案1】：

使用浏览器特定的对占位符的伪调用应该可以解决您的问题

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

【讨论】：

谢谢。但是只是css伪代码是有效的并且可以解决问题。其余样式不需要，使用这些代码，结果会有所不同，而不是我想要的（如附图所示）

【解决方案2】：

你可以这样使用：

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

【讨论】：

谢谢。这是一个棘手的解决方案。但我的意思是使用占位符，而不是使用值作为占位符。