Question

我在整个文档的html标签中使用了rtl方向（对于波斯语）。但我有一些用户名或电子邮件地址的输入元素（如你所知，这些是英语，必须是ltr）。我google并找到一些自动指向的脚本。他们工作，但如果我输入 rtl占位符，占位符文本也将是ltr！
你能指导我吗？我想要这样的事情：
[样本]：http://sumdroid.pe.hu/sample.jpg“请看这个图像”

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

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

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

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

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

2 个答案: