原生html中input标签oninput处理器使用

文章目录

• 一、input介绍
• 二、作者demo代码
• • 获取到input的输入值
  • 获取到input的输入值处理之后并返回给input
• 三、总结
• 参考文档

一、input介绍

• oninput 是一个在 HTML 中用于处理元素（如 、 或内容可编辑的
  等）实时输入事件的事件处理器属性。当用户在这些元素中输入文本、更改值或进行其他形式的输入时，oninput 事件会立即触发，允许您在代码中实时响应这些变化。

二、作者demo代码

获取到input的输入值

<!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

• 功能：限制输入框只能输入数字和英文
• 最简单的写法

<!DOCTYPE html>
<html lang="en">
<body>
<input  oninput="value=value.replace(/([^0-9A-Za-z])|/g,'')"/>
</body>
</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 属性并指向相应的处理函数，您可以轻松地在用户输入过程中捕获并响应这些变化。

参考文档

• 通义千问