最可靠方案是oninput事件实时监听并赋值转大写，同时叠加onpaste事件延迟处理粘贴内容，避免光标错位和移动端兼容问题。
input框输入时实时转大写，用oninput最可靠
直接监听oninput事件，比onchange或onblur更及时——后者只在失焦或回车后触发，无法满足“输入时自动转大写”的需求。oninput在每次键入、粘贴、删除都触发，且兼容现代浏览器（ie9+）。
关键点是：必须用value赋值并同步更新元素的value属性，否则光标会跳到末尾。示例：
<input type="text" id="upperInput" placeholder="输入试试"><script>
document.getElementById('upperInput').addEventListener('input', function(e) {
const val = e.target.value;
// 只对变化后的值做转换，避免无意义重赋值
if (val !== val.toUpperCase()) {
e.target.value = val.toUpperCase();
// 手动保持光标位置（可选，多数场景不显式处理也OK）
const pos = e.target.selectionStart;
e.target.setSelectionRange(pos, pos);
}
});
</script>
用text-transform: uppercase只是视觉欺骗
CSS的text-transform: uppercase只改变渲染样式，input.value实际值仍是原始大小写。表单提交、JS读取、后端接收时全按原样处理，根本达不到“自动转大写”的业务目的。
常见误用场景：
- 用户以为已转大写，但提交后后端收到小写字母，校验失败
- 用
form.serialize()或FormData获取值时，拿到的是未转换的原始字符串 - 配合
lay-verify="required|alphanum"等Layui校验时，alphanum规则默认不校验大小写，但业务可能要求纯大写英文数字，仅靠CSS无法满足
Layui中结合form.on('submit')做二次兜底
前端监听oninput已能覆盖绝大多数输入路径，但仍有例外：比如用户右键粘贴含小写字母的内容后快速点提交按钮，极短时间内可能绕过oninput（尤其旧版浏览器）。稳妥做法是在提交时再强制统一：
form.on('submit(yourFilter)', function(data){
// 对特定字段做强制转大写
data.field.yourField = (data.field.yourField || '').toUpperCase();
// 后续正常提交...
return true;
});
注意：data.field是Layui解析后的对象，修改它会影响最终提交的数据，但不会反向更新DOM中的input.value（所以仍需前端实时监听保证体验）。
移动端粘贴行为要特别留意
iOS Safari和部分安卓浏览器在粘贴时，oninput有时触发不及时或漏掉一次。单纯依赖oninput可能导致粘贴后首字符仍为小写。
解决方法是叠加监听onpaste并延迟执行转换：
const el = document.getElementById('upperInput');
el.addEventListener('paste', function(e) {
setTimeout(() => {
el.value = el.value.toUpperCase();
}, 0);
});
这个setTimeout不是为了防抖，而是让浏览器先完成粘贴动作，再读取并转换最新值。实测比oninput单独处理更稳。
oninput + onpaste组合才是生产环境推荐做法。
