Js/jQuery实时监听输入框值变化
2024-09-21 02:42:04
前言
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感。而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条件。
首先看一下dom中元素事件:
- onpropertychange: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获。onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 在用js脚本改动该元素值时候亦能触发onpropertychange事件。
- oninput:是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。
- onchange: (a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效);(b)当前对象失去焦点(onblur);
jQuery用法
$("#input1").bind("input propertychange change",function(event){
console.log($("#input1").val())
});
原生Js
<script type="text/javascript">
// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
function OnInput (event) {
alert ("The new content: " + event.target.value);
}
// Internet Explorer
function OnPropChanged (event) {
if (event.propertyName.toLowerCase () == "value") {
alert ("The new content: " + event.srcElement.value);
}
}
</script>
//Input标签
<input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />
转: https://blog.csdn.net/idomyway/article/details/79078625
最新文章
- python(22)总结下最近遇到的编码问题
- 深度神经网络DNN的多GPU数据并行框架 及其在语音识别的应用
- 6. ActionBar详解
- Unity3D-Baked Lightmapping 示例学习
- CentOS6脱机rpm安装MariaDB10
- SettingsProvider 它SettingsCache
- Express 简介
- [转]动态管理视图和函数 (Transact-SQL)
- Django 学生管理系统
- 华硕ASUSPRO P5440UA笔记本电脑安装驱动
- You must reset your password using ALTER USER statement before executing this statement.
- SpringMVC的请求处理流程
- idea2018+maven+web新手maven指南
- Spring之Bean的注入
- android kotlin Gradle DSL method not found: &#39;1.2.51()&#39;错误,be using a version of the Android Gradle plug-in that does not contain the method (e.g. &#39;testCompile&#39; was added in 1.1.0).
- 012_如何清除DNS缓存
- mac下/usr/local/bin No such file or directory问题解决
- springmvc接收jquery提交的数组数据
- NSOperation和NSOperationQueue的一些基本操作
- 【uoj125】 NOI2013—书法家
热门文章
- 【spring boot】整合LCN,启动spring boot2.0.3 启动报错:Unable to start ServletWebServerApplicationContext due to missing ServletWebServerFactory bean.
- 【java】java工具类StringUtils,org.apache.commons.lang3.StringUtils
- JavaScript程序员必备的5个debug技巧
- js:对象的创建(为prototype做铺垫)
- ajax成功返回数据中存在多余字符的处理
- OpenCV学习(5) Mat的基本操作(2)
- 一些LR的经验,讲的还不错
- C++primer习题--第3章
- TCP/IP编程 - 1) 基础知识
- KineticJS教程(12)