dirname 属性必须配合 name 属性才有效,浏览器仅在表单提交时将 ltr 或 rtl 方向值作为 name.dir 字段发送,其值由用户首次输入字符的 unicode bidi 类别决定,且不随 dir 属性或 dir="auto" 动态变化。

dirname 属性必须配合 name 属性才有效
单独写 dirname 不会触发任何行为,浏览器只在表单提交时,把值为 ltr 或 rtl 的方向信息作为额外字段发出去,前提是该 input 同时有 name。比如:
<input type="text" name="query" dirname="query.dir">提交后,后端会收到两个字段:
query(文本内容)和 query.dir(方向值,如 "rtl")。
输入法切换或手动设置 dir 不会自动更新 dirname 值
dirname 只读取用户**实际输入时的初始书写方向**,不是元素当前 dir 属性值,也不随 dir="auto" 动态变化。常见误区包括:
- 给
input设置dir="rtl",但用户用英文键盘输入,dirname仍可能提交"ltr" - 用户先输中文(触发
rtl?不,中文默认仍是ltr),再切到阿拉伯语输入法——只有**第一个字符的 Unicode bidi 类别**决定方向,且仅在聚焦后首次输入时锁定 -
dir="auto"对dirname无影响,它只作用于渲染,不参与表单数据生成
服务端接收时字段名带 .dir 后缀,注意解析逻辑
浏览器自动把 dirname 值拼成 [name].dir 发送,所以后端不能直接查 req.body.query.dir(JS 中点号是非法属性名)。正确做法是:
- Node.js/Express:用
req.body["query.dir"]或启用extended: true的urlencoded中间件(默认已启用) - PHP:
$_POST['query.dir']可直接访问 - Python/Flask:
request.form.get('query.dir') - 若
name包含特殊字符(如user[name]),dirname字段名会变成user[name].dir,需同步处理
移动端 iOS Safari 对 dirname 支持不稳定
iOS 15.4 之前版本存在 bug:软键盘弹出后方向检测失效,dirname 总是返回 "ltr",即使输入的是阿拉伯语。目前较稳妥的兼容方案是:
- 降级使用 JavaScript 监听
input事件 +getComputedStyle(el).direction,但注意该值反映的是 CSSdir,非真实输入方向 - 改用
Intl.Locale检测用户语言区域,或通过首字符 Unicode 范围(如 \u0600–\u06FF)做简单判断 - 仅在明确需要 bidi 支持的场景(如多语言客服表单)启用
dirname,其他情况可忽略
真正起作用的不是属性本身,而是用户第一次敲下的那个字符的双向算法类别——这点很容易被当成“页面没刷新导致失效”,其实根本没机会刷新。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











