Android端Chrome 89下双向适配textarea输入RTL文本按空格光标跳句首问题

你遇到的是Android Chrome 89版本下，dir="auto"双向文本自动识别逻辑的原生编辑器bug。触发逻辑为：当textarea自动识别文本为RTL方向时，移动端Chrome特有的触控光标定位计算出现偏差，输入空格时会误将光标锚定到当前RTL文本块的开头位置；桌面端Chrome不存在这套移动端触控适配的定位逻辑，因此不会复现该问题。

整个方案不需要JS判断文本方向，也不会硬编码固定的direction: rtl/direction: ltr，完全保留混排支持能力，具体调整点：

• 移除textarea元素自身样式中硬写的text-align: right，仅将右对齐规则保留在::placeholder上，避免元素自身对齐方向和dir="auto"自动识别的方向产生冲突，放大定位偏差
• 给所有使用dir="auto"的textarea新增unicode-bidi: plaintext属性，该属性会让浏览器按照文本自身的Unicode双向规则排版，既可以完全兼容LTR/RTL混排场景下的标点正常显示，也能直接绕开Chrome 89的光标定位bug
• 移除无实际必要的will-change: transform属性，该属性会触发textarea独立渲染分层，进一步加剧光标位置的计算误差

textarea[data-type="alpha"] {
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* 双向排版兜底，绕开光标定位bug */
  unicode-bidi: plaintext;
}

textarea[data-type="alpha"]::placeholder {
  text-align: right;
}

textarea[data-type="beta"] {
  display: block;
  box-sizing: border-box;
  font-family: inherit;
  /* 双向排版兜底，绕开光标定位bug */
  unicode-bidi: plaintext;
}

textarea[data-type="beta"]::placeholder {
  text-align: right;
}

• 不会破坏原有LTR文本的正常输入体验，所有现有交互逻辑完全保留
• 支持同一段落内LTR、RTL文本混合输入，不会出现标点错位、排版异常的问题
• 该属性在Chrome后续高版本、Safari、Firefox中均有良好兼容，不需要后续做版本回退调整

注意：该方案完全不需要改动原有textarea的HTML结构，保持dir="auto"属性不变即可生效。

内容的提问来源于stack exchange，提问作者amirhe