1. 当 input/textarea 的 class 和 placeholder-class 上设置的方向样式不同时 无法正确显示 placeholder 的方向。
<view class="title">1. 方向测试</view>
<textarea class="rtl" placeholder-class="ltr" placeholder="请输入文本……"></textarea>
<input class="rtl" placeholder-class="ltr" placeholder="请输入文本……" />
// 有关 css 代码
.ltr { direction: ltr; }
.rtl { direction: rtl; }
结果1:在开发者工具和安卓上,input 正常显示,不过 textarea 的 placeholder-class 里设置的 direction 无效。当 input 获取焦点是 rtl 无效,轻质 ltr。
结果2:在 IOS 上,input/textarea 的 class 和 placeholder-class 里设置的 direction 无效(始终 ltr,不能设置 rtl)。不过 textarea 好像按照输入的语言文本来确认方向。
2. input/textarea 的 class 和 placeholder-class 上设置的字体样式无效
<view class="title">2. 字体测试</view>
<textarea class="rtl custom-font" placeholder-class="" placeholder="مەزمۇن كىرگۈزۈڭ..."></textarea>
<input class="rtl custom-font" placeholder-class="" placeholder="مەزمۇن كىرگۈزۈڭ..." />
<input class="rtl" placeholder-class="custom-font" placeholder="مەزمۇن كىرگۈزۈڭ..." />
<input class="rtl custom-font" placeholder-class="custom-font" placeholder="مەزمۇن كىرگۈزۈڭ..." />
// 有关 css 代码: 字体 用 base64 方式嵌入到代码中,这里忽略了
.custom-font { font-family: 'UKIJ Ekran'; }
结果1:在开发者工具和安卓上,textarea 正常显示,不过 input 的 class 里设置的 font-family 无效。placeholder 正常显示,不过获取焦点时无效。
结果2:在 IOS 上,input/textarea 的 class 和 placeholder-class 里设置的 font-family 无效。
可以用text-align 代替direction 在安卓和苹果都可以正常显示