CSS：从左到右的输入元素和从右到左的插入

Question

我在整个文档的html标签中使用了rtl方向（用于波斯语），但是我有一些输入元素，比如用户名或电子邮件地址（这些都是英文，必须是ltr）。我通过谷歌搜索找到了一些自动方向脚本。它们可以工作，但是如果我在输入框中设置了rtl占位符，那么占位符文本也会是ltr！您能指导我吗？我想要像这样的效果：[示例]：http://sumdroid.pe.hu/sample.jpg "请参考此图片"。

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

- Parsa

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

- Stewartside

---

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

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

Demo: http://codepen.io/mehrabi/pen/yePmEZ

- Mohammad Mehrabi

---

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