文章目录
一、input介绍
- oninput 是一个在 HTML 中用于处理元素（如 、 或内容可编辑的
等）实时输入事件的事件处理器属性。当用户在这些元素中输入文本、更改值或进行其他形式的输入时，oninput 事件会立即触发，允许您在代码中实时响应这些变化。
二、作者demo代码
获取到input的输入值
html
<!DOCTYPE html>
<html lang="en">
<body>
<!-- 主体区域 -->
<input oninput="handleInput(event)" />
<!-- 底部 -->
<script>
function handleInput(event) {
const currentValue = event.target.value;
// 根据 currentValue 进行处理，如更新组件状态、执行校验等
console.log(currentValue)
}
</script>
</body>
</html>
获取到input的输入值处理之后并返回给input
- 功能：限制输入框只能输入数字和英文
- 最简单的写法
html
<!DOCTYPE html>
<html lang="en">
<body>
<input oninput="value=value.replace(/([^0-9A-Za-z])|/g,'')"/>
</body>
</html>- 使用方法的写法
html
<!DOCTYPE html>
<html lang="en">
<body>
<!-- 主体区域 -->
<input oninput="value=handleInput(event)" />
<!-- 底部 -->
<script>
function handleInput(event) {
const currentValue = event.target.value;
//处理输入的字符串
const handleValue = currentValue.replace(/([^0-9A-Za-z])|/g,'')
return handleValue
}
</script>
</body>
</html>三、总结
- 总之，oninput 方法是实现用户输入实时反馈、数据验证、动态计算等需求的有效工具。通过在 HTML 元素上绑定 oninput 属性并指向相应的处理函数，您可以轻松地在用户输入过程中捕获并响应这些变化。