文档章节

js与jquery实时监听输入框值的oninput与onpropertychange方法

Airship
 Airship
发布于 2016/12/09 08:58
字数 482
阅读 59
收藏 0
点赞 0
评论 0

本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法。分享给大家供大家参考。具体如下:

最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容。

初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发。曲线救国一下,想到用 keydown 来解决。其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发的。所以这个方法也排除掉了。

然后,查询了一些相关资料,发现只有原生 js 的 oninput & onpropertychange 符合此要求,接着便去 JQ 的 API 里去找符合的方法,很失望,并未找到,但是 bind 确实会绑定类似的事件,那便是 input & propertychange,通过测试,确实是没问题的。

现在将例子奉上:

$('input').bind('input propertychange', function() { 
 //进行相关操作 
});

其中:propertychange 是为了兼容 IE9 以下版本的。

JS中的 oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况:

修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。

修改了 input:text 或者 textarea 元素的值,value 属性发生变化。
修改了 select 元素的选中项,selectedIndex 属性发生变化。
JS:

if(isIE) 
{ 
 document.getElementById("input").onpropertychange = keys(); 
} 
else //需要用addEventListener来注册事件 
{ 
 document.getElementById("input").addEventListener("input", keys, false);
}

希望本文所述对大家的javascript程序设计有所帮助。

本文转载自:http://www.jb51.net/article/60789.htm

共有 人打赏支持
Airship
粉丝 34
博文 789
码字总数 18996
作品 0
南京
高级程序员
javascript中查看元素事件函数的一些技巧

在分析一些网页的时候,经常会发现点击某个按钮会触发某个动作,当页面比较复杂,包含的js文件又多,这时候要找到这段触发函数的代码写在哪里就比较困难。比如,在某个html页面中,发现如下一...

技术小甜 ⋅ 2017/11/07 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

jQuery函数attr()和prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。 但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别...

Apirl ⋅ 05/16 ⋅ 0

Python自动化开发学习17-jQuery

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块。 jQuery在线手册:http://jquery.cuishifeng.cn/ 官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x...

骑士救兵 ⋅ 昨天 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

js (jQuery) 之 取值

都是一些老生常谈,没什么新东西,算是开发过程中不知道怎么写去百度的一些东西 。都说程序员写博客是一个好习惯,算是一份保存笔记,以后不用到处百度然后出来的一些答非所问的答案 。 1: ...

architect刘源源 ⋅ 05/07 ⋅ 0

JavaScript 参考手册

JavaScript 参考手册 http://www.w3school.com.cn/jsref/index.asp 本部分提供完整的 JavaScript 参考手册: JavaScript 本地对象和内置对象 Browser 对象(BOM) HTML DOM 对象 JavaScript...

chenhao_asd ⋅ 05/25 ⋅ 0

Javascript JQuery获取当前元素的兄弟元素/上一个/下一个元素(转)

var chils= s.childNodes; //得到s的全部子节点var par=s.parentNode; //得到s的父节点var ns=s.nextSbiling; //获得s的下一个兄弟节点var ps=s.previousSbiling; //得到s的上一个兄弟节点v...

easonjim ⋅ 2017/01/04 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

缅甸银河国际开户13170533331

解决这个问题涉及到两个方面的问题: 配置问题 、引入静态文件问题 1、配置问题 web.xml配置的DispatchServlet如下: [html] view plain copy springmvc org.springframework.web.servlet.D...

银河国际 ⋅ 05/26 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud构建微服务架构服务注册与发现

Spring Cloud简介 Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中涉及的配置管理、服务发现、断路器、智能路由、微代理、控制总线、全局锁、决策竞选、...

明理萝 ⋅ 29分钟前 ⋅ 0

占位slot

一、为什么我们需要slot 假如我们有个需要,子组件中需要显示一段html内容,显示什么不是由子组件决定,而是由父组件传递什么决定,我们该怎么做 很挫的做法,我们使用组件间的数据传递 父组...

金于虎 ⋅ 29分钟前 ⋅ 0

Linux集群 NTP 时间同步

基于CentOS 7 规划 比如有2台机器 IP 主机名 说明 192.168.103.51 cdh51 本地NTP服务端 192.168.103.52 cdh52 本地NTP客户端 安装NTP服务 每台机器都安装ntp yum -y install ntp NTP服务端(...

囚兔 ⋅ 31分钟前 ⋅ 0

国际版链克口袋 获取方法

1 月16日,网心科技玩客云团队在官网发布了停止链克口袋转帐服务的通知。通知中表示迅雷将于1月25日在AppStore和官网,正式发布链克口袋新版本,新版本不支持迅雷及迅雷合作伙伴开发的应用场...

xiaogg ⋅ 32分钟前 ⋅ 0

Raft中Batching和pipelining到底是什么?

Raft supports batching and pipelining of log entries, and both are important for best performance. Many of the costs of request processing are amortized when multiple requests a......

黑客画家 ⋅ 33分钟前 ⋅ 0

Mybatis-Plus 之BaseMapper 方法详解

/** * Mapper 继承该接口后,无需编写 mapper.xml 文件,即可获得CRUD功能 * 这个 Mapper 支持 id 泛型 * @author hubin * @Date 2016-01-23 */public interface BaseMapper<T> ...

干干 ⋅ 33分钟前 ⋅ 0

JVM笔记9-Class类文件结构

摘要: 1.Class类文件结构   Class 文件是一组以 8 位字节为基础单位的二进制流,各个数据项目严格按照顺序紧凑地排列在 Class 文件之中,中间没有添加任何分隔符,这使得整个 Class 文件中...

传授知识的天使 ⋅ 37分钟前 ⋅ 0

MySQL数据库之sleep线程过长如何处理?

  什么是sleep线程?   sleep线程长时间保持可客户端与服务端的连接状态   导致sleep过多的原因:   使用太多持久连接(高并发系统中 不适合使用持久连接)   程序中 没有及时关闭MyS...

老男孩Linux培训 ⋅ 38分钟前 ⋅ 0

转发和重定向的区别

转发在服务器端完成的;重定向是在客户端完成的 转发的速度快;重定向速度慢 转发的是同一次请求;重定向是两次不同请求 转发不会执行转发后的代码;重定向会执行重定向之后的代码 转发地址栏...

冯莉莉莉莉 ⋅ 38分钟前 ⋅ 0

go语言实现http proxy的关键一步

go语言自带包ReverseProxy 实现了proxy的功能。 但我希望proxy进程能够在代理的同时,完整的把请求和请求体记录在日志里。 仅使用ReverseProxy 包的话,uri记录没问题,但body只能被读取一次...

xuanzilie ⋅ 44分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部