HTML中input标签输入内容自动转小写的JS教程-html教程-PHP中文网

input标签无原生自动转小写属性，autocapitalize仅控制键盘首字母行为；必须用javascript监听input事件实时调用tolowercase()并保持光标位置，配合autocapitalize="off"才能真正实现输入即小写。

html中input标签输入内容自动转小写的js教程

input 标签本身没有自动转小写的原生属性，靠 autocapitalize 只能控制键盘首字母行为，不能强制转小写；真要“输入即小写”，必须用 JavaScript 拦截并重写 value。

用 `input` 事件实时转小写（推荐）

这是最可靠的方式，覆盖所有输入来源：键盘、粘贴、拖拽、IME 输入（如中文拼音）、剪贴板插入等。

必须监听 input 事件，不是 keyup 或 change——前者漏掉粘贴，后者只在失焦时触发
需手动保存和恢复光标位置，否则用户编辑中间内容时，光标会跳到末尾
对含 emoji、带变音符号的字符（如 café）也安全，toLowerCase() 在现代浏览器中 locale-aware 行为稳定

const field = document.querySelector('input[data-lowercase]');
field.addEventListener('input', (e) => {
  const start = e.target.selectionStart;
  const end = e.target.selectionEnd;
  e.target.value = e.target.value.toLowerCase();
  e.target.setSelectionRange(start, end);
});

为什么不用 `text-transform: lowercase`？

这个 CSS 只是视觉欺骗，实际 input.value 仍是原始大小写。后端收到的、JS 读取的、表单提交的，全都不变——验证码比对失败、用户名校验不通过、API 返回 400 都可能因此发生。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

text-transform 不影响 DOM 的 value 属性值
用户复制粘贴进来的 ABC 依然保持大写
屏幕阅读器读出的仍是原始大小写，无障碍体验受损

`autocapitalize="off"` 和 JS 转小写要一起用

单独设 autocapitalize="off" 只告诉键盘“别自动大写”，但不阻止用户按住 Shift 手动输大写；而 JS 转小写会覆盖它。两者配合才真正闭环。

autocapitalize="off" 是给移动端软键盘的提示，iOS/Android 键盘响应更及时
JS 转小写是兜底逻辑，确保无论怎么输，最终值都是小写
别把 autocapitalize 写在 form 上——它不继承，每个 input 得单独写
type="email" 或 type="password" 下，autocapitalize 默认已为 off，但显式写上更保险

容易踩的坑：组件封装导致属性丢失

用 Vant、Ant Design Mobile、Element Plus 等 UI 库时，autocapitalize 和自定义事件监听常被封装层拦截。

React/Vue 组件通常不自动透传原生属性，得查文档看是否支持 inputProps 或 attrs 透传
例如 Vant 的 <van-field></van-field> 需写成：:input-props="{ autocapitalize: 'off' }"
监听事件也要绑定在真实 input 元素上，不是组件根元素——可用 ref 或 querySelector 获取底层 input