HTML5 input事件检测输入框变化

之前一直用change事件来监听输入框内容是否发生变化,只有当输入框失去焦点时才会触发,没想到html5还有个input事件,只要输入框内容发生变化就会立即触发,既然有这么好的东西我们干嘛放着不用呢,接下来就来给大家介绍一下:

如果我们页面上有这样一个简单到极致的输入框:

1 <input type="text">

那么我们现在用jquery给它绑定input事件,如下:

1 $("input:text").bind("input propertychange",function(){
2 
3   console.log($(this).val().length);//打印输入框字符长度
4 
5 });

这样一来只要输入框内容发生变化,都会立即打印出里面字符串的长度来了。

需要注意的是input事件是html5的东东,IE9以下版本中是无法支持的,所以需要用propertychange事件来代替。

input事件除了能够监听input:text元素的内容变化,同时还可以监听input:password,input:search以及textarea这几个元素,在html绑定的写法为:

1 <input type="text" oninput="onInput(event)" onpropertychange="onPropertyChange(event)">

 

posted @   劳卜  阅读(15432)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
点击右上角即可分享
微信分享提示