dirname属性必须与name配合使用且值为“name.dir”格式,仅chrome/edge/safari原生表单提交支持,firefox完全不支持,服务端需容错处理缺失或非法值。

dirname属性必须和name一起用,否则字段根本不会出现
浏览器只在 input 或 textarea 同时具备 name 和 dirname 属性时,才生成方向字段。漏掉 name,哪怕写了 dirname="query.dir",Network 面板里也看不到 query.dir 字段。
常见错误写法:
-
<input type="text" dirname="query.dir">→ 无效,没name -
<input type="text" name="query" dirname="dir">→ 无效,dirname值不是"query.dir" -
<input type="text" name="query" dirname="query.direction">→ 无效,后缀必须是.dir,不能是.direction
正确写法只有一种:<input type="text" name="query" dirname="query.dir">。提交后,表单数据中才会同时存在 query 和 query.dir 两个键。
方向值由首个强方向 Unicode 字符决定,不是输入法或 dir 属性
dirname 不读取 dir="rtl",也不响应输入法切换,它只看用户聚焦后敲下的第一个“强方向 Unicode 字符”:
- 拉丁字母、数字、ASCII 标点 → 推断为
ltr - 阿拉伯字母(
\u0600–\u06FF)、希伯来字母(\u0590–\u05FF)→ 推断为rtl - 中文、日文、韩文、空格、制表符 → 属于“弱方向”,不触发判定,fallback 到
ltr
这意味着:先输一个空格再输 مرحبا,仍可能提交 query.dir=ltr;dir="auto" 对 dirname 完全无效——它只影响渲染,不参与方向推断;用户切到阿拉伯语键盘但还没输入,字段值仍是未定义的;直到真正敲下第一个强方向字符,方向才锁定。
服务端接收 query.dir 必须用方括号语法
字段名含点号(.),JS 对象点语法会报错。不能写 req.body.query.dir,必须显式用字符串键访问:
- Node.js/Express:
req.body["query.dir"](最稳妥)或确保urlencoded({ extended: true })已启用(默认已开) - PHP:
$_POST['query.dir']可直接读取 - Python/Flask:
request.form.get('query.dir')
若 name="user[profile]",则实际字段名为 user[profile].dir,需同步处理方括号和点号。更关键的是:这个字段不是必填项。iOS Safari 至今不支持(截至 iOS 17.5),Firefox 早期版本也有兼容问题,所以服务端逻辑必须允许 query.dir 缺失、为空或值非法(如 "auto"),并 fallback 到首字符 Unicode 检测或 Accept-Language 头判断。
Firefox 明确不支持 dirname,别指望它自动生效
dirname 属性在 Firefox 中不提交方向值——这是当前(2026 年 4 月)的确定事实,不是兼容性待修复的问题,而是 Firefox 明确不支持该属性。即使你在 input 或 textarea 上写了 dirname="myfield.dir",Firefox 的 Network 面板里也看不到 myfield.dir=rtl 这类键值对。
Chrome / Edge / Safari 支持,但仅限原生表单提交(即点击 <input type="submit">),不会影响 fetch()、XMLHttpRequest 或 FormData 构造。方向值只有两个可能:ltr 或 rtl,由元素当前的 dir 属性或继承的文本方向决定;不能手动设置。
替代方案:用 JavaScript 显式采集方向:
- 监听
input或blur事件,用getComputedStyle(el).direction或检查el.dir获取当前方向 - 手动向
FormData追加方向字段:formData.append("myfield.dir", el.dir || "ltr")
真正容易被忽略的是:很多人以为加了 dirname 就“自动适配 RTL”,结果在 Firefox 下完全失效,而测试时又只用 Chrome 看——最终上线才发现阿拉伯语/希伯来语用户的方向信息根本没传到后端。











