input type="date" 的提示语不由HTML控制,placeholder被忽略,文案由系统和浏览器本地化决定;可通过label、aria-describedby等外围文案实现国际化,iOS下弹出面板语言强制跟随系统无法更改。

input type="date" 的提示语根本不由 HTML 控制
浏览器对 的占位符(placeholder)、默认提示文字(比如“选择日期”“Enter a date”)完全忽略 placeholder 属性,也不支持通过 HTML 属性做多语言提示。这些文案由操作系统和浏览器本地化设置决定,无法用 HTML 或 CSS 覆盖。
能改的只有 label 和辅助文本,不是 input 自身提示
真正可国际化的部分是围绕控件的可见文案,比如 、 这类手动添加的说明文字。实际做法是:
- 用 JavaScript 检测
navigator.language或服务端传入的语言标识(如zh-CN、en-US) - 动态设置
label.textContent和辅助提示元素的 innerText - 避免在
title属性里塞翻译——它只在 hover 时出现,且语义不符,无障碍支持差
需要真国际化提示?得换方案
如果产品要求用户未聚焦时就看到明确的多语言引导(例如“请选择生日”), 本身做不到。可行替代路径有:
- 用自定义日期选择器(如 flatpickr、Pikaday),它们提供
locale配置项,支持完整文案替换 - 保留原生控件,但在其上方或右侧加一个带语言切换逻辑的
提示,例如:请选择出生日期
- 对 screen reader 用户,用
aria-describedby关联描述性 ID,并确保该描述文本也随语言切换更新
注意 iOS Safari 的特殊行为
iOS 上 的弹出面板文案始终跟随系统语言,哪怕网页强制设为英文,只要设备语言是中文,面板里仍是“年/月/日”。这个无法绕过,也不响应 lang 属性或 hreflang。如果你的应用必须统一界面语言,这点必须提前告知产品经理——原生 date 输入框在 iOS 下不具备可控的 UI 文案自由度。
立即学习“前端免费学习笔记(深入)”;










