必须在表单元素上显式设置dir属性，因为direction: rtl仅控制视觉对齐和块级排版，不触发unicode双向算法，无法正确影响和的光标移动、输入顺序、placeholder对齐及选区逻辑。
表单元素的文本方向必须用 dir 属性显式控制，direction: rtl 无法保证光标、输入顺序、placeholder 行为正确。
为什么 direction: rtl 对 <input> 和 <textarea></textarea> 无效
direction 只影响视觉对齐和块级排版，不参与 Unicode 双向算法（Bidi Algorithm）。而表单控件的输入行为——比如光标移动方向、回车换行逻辑、选中文本起止位置、粘贴后数字顺序——全由 dir 属性触发的底层文本流决定。
- 仅设
style="direction: rtl"的<input>：placeholder 可能右对齐，但用户输入时仍从左开始打字，光标乱跳 - 在 RTL 页面中漏掉
<textarea></textarea>的dir：粘贴阿拉伯语后，数字“١٢٣”可能被拆成“٣٢١”，括号反向 - Chrome/Firefox/Safari 均不将
direction视为表单方向语义信号，该行为无浏览器兼容性补救空间
dir 应该加在哪些表单元素上
不是所有表单标签都支持 dir，它只对承载可编辑或可显示文本的元素生效。以下必须加，且不能依赖继承：
-
<input type="text">、<input type="search">、<input type="email">等文本类输入框 -
<textarea></textarea>—— 尤其重要，长文本混排时 Bidi 错误最明显 -
<select></select>和<option></option>：下拉选项文字方向需与内容匹配，否则阿拉伯语选项文字错位 -
<button></button>、<input type="submit">：按钮文字方向影响点击区域感知和读屏器朗读 - 避免加在
<label></label>上就以为覆盖了关联控件——<label for="x"></label>不控制id="x"的输入行为
如何处理 placeholder 与输入内容方向不一致
placeholder 默认继承父级 dir，但输入内容方向由控件自身的 dir 决定。若两者不一致（例如全局 dir="rtl"，但某个输入框需 LTR 输入），必须分开控制：
- 给控件设
dir="ltr"，同时用 CSS 强制 placeholder 方向：::placeholder { direction: ltr; } - 不要用
direction: ltr替代dir="ltr"——后者才影响输入逻辑，前者只改 placeholder 显示 - 在 Safari 中，
::placeholder的direction支持不稳定，建议配合text-align: start微调对齐 - 动态切换语言时，优先用 JS 修改
element.dir，而非仅改 style，否则输入焦点恢复后方向可能回退
嵌套混合方向内容时用 <bdi></bdi> 隔离
当表单值来自不可信来源（如用户名、文件名、API 返回错误消息），且父容器是 RTL，直接插入会导致标点错位、点号跑左边、复制内容与显示不一致：
- ❌ 危险写法：
<input dir="rtl" value="Error: file.txt">→ 渲染出 “.txtelif :rorroE” - ✅ 正确做法：JS 动态创建
<bdi></bdi>包裹不可信片段，或服务端预处理插入<bdi>file.txt</bdi> -
<bdi></bdi>不接受dir属性，加了会禁用自动探测，行为失控 - 旧版 Safari（13.0 及更早）不支持
<bdi></bdi>，生产环境需降级 fallback：对 ASCII 主导的字符串显式加dir="ltr"
最容易被忽略的是：表单控件的方向设置无法靠祖先元素 dir 完全继承，哪怕 已声明，<input> 仍需单独加 dir="rtl" 才能确保光标、剪贴板、屏幕阅读器行为一致。这不是冗余，是规范强制要求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
