收藏
回答

input/textarea 设置 direction 和 font-family 无效

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug input/textarea 微信iOS客户端 8.0.0 2.14.4

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 无效。


回答关注问题邀请回答
收藏

1 个回答

  • 无水而沉
    无水而沉
    2021-03-27

    可以用text-align 代替direction 在安卓和苹果都可以正常显示

    2021-03-27
    有用 2
    回复 2
    • 神经蛙
      神经蛙
      2022-12-05
      😂😂😂
      2022-12-05
      回复
    • 神经蛙
      神经蛙
      2022-12-05回复神经蛙
      👍👍👍👍
      2022-12-05
      回复
登录 后发表内容
问题标签