如何获取type为date的HTMLInputElement内的光标位置

原生 type="date" 类型的输入框没有公开API支持获取内部光标位置，也没有标准方法能将光标位置映射到年、月、日分段，核心原因和可行方案如下：

• selectionStart、selectionEnd 对date类输入返回无效值是规范要求的正常表现：HTML标准明确规定，date、number、time这类非纯文本输入控件，这两个属性必须返回null，和输入框内的日期值是否完整、是否有效没有关系，哪怕日期内容完全合法，也拿不到这两个属性的有效值。
• 原生date输入框的内部渲染完全由浏览器控制，属于封装在影子DOM里的黑盒实现：不同浏览器、不同系统区域设置下，日期字段的顺序（是年-月-日还是月/日/年）、分隔符、内部段结构都不一样，浏览器没有对外暴露内部段的位置、当前激活段的任何接口，哪怕在keydown事件的任意阶段触发，也拿不到内部光标上下文。
• 不要尝试通过破解影子DOM内部结构的方式hack：各浏览器的影子DOM结构、类名会随版本迭代频繁变动，这类方案没有稳定兼容性，正式环境使用会出现大量跨版本、跨系统的适配问题。

如果业务必须要识别光标对应的日期分段，直接放弃原生date输入框，用自定义实现模拟即可：

• 基础实现可以拆分为3个独立的数字/文本输入框，分别对应年、月、日字段，输入框之间用分隔符拼接，每个独立输入框的光标位置可以正常通过selectionStart/selectionEnd获取，天然就能对应到所属的日期分段。
• 如果需要适配不同区域的日期格式习惯，可以通过Intl.DateTimeFormat读取当前环境的本地日期格式规则，动态调整年、月、日输入段的顺序和分隔符样式，模拟出和原生date输入一致的本地化表现。

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