javascript监听输入框_js与jquery实时监听输入框值的oninput与onpropertychange方法
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法。分享给大家供大家参考。具体如下:
最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容。
初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发。曲线救国一下,想到用 keydown 来解决。其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发的。所以这个方法也排除掉了。
然后,查询了一些相关资料,发现只有原生 js 的 oninput & onpropertychange 符合此要求,接着便去 JQ 的 API 里去找符合的方法,很失望,并未找到,但是 bind 确实会绑定类似的事件,那便是 input & propertychange,通过测试,确实是没问题的。
现在将例子奉上:
JQ:
$('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程序设计有所帮助。
javascript监听输入框_js与jquery实时监听输入框值的oninput与onpropertychange方法相关推荐
- jquery实时监听输入框值变化
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...
- html监听页面滚动高度,jquery如何监听滚动条事件?
jquery如何监听滚动条事件?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: 在浏览很多网页中都会发现,当滚动条滚动到一定的位置的时候就出显示一 ...
- Java实时监听文件夹,实现实时监听微信接收的文件,去掉文件的只读属性
前言 众所周知,小而美软件每次更新都不干人事啊.上次忘了哪个版本更新的,接收到的文件一律是只读文件,虽然只需要右键属性把只读勾选去掉就行,但是每次接收了个文件都要这么做属实是有点麻烦.所以就自己写了个 ...
- JQUERY实时监听INPUT输入值
JQUERY方法: 方法原型: $(selector).bind(event,data,function,map) selector的语法参照jquery选择器语法 参数 描述 event 必需.规定 ...
- html div实时监听,jquery实时监听div高度变化
素胚勾勒不出你 Document dianwo
- php监听input,jQuery如何实时监听获取input输入框的值
jQuery实时监听获取input输入框的值,在我们日常web项目开发也常需要去实现这样的功能效果.为了作出即时动作去引导浏览者,以便提高网站的用户体验感. 下面我们就结合具体的代码示例,为大家介绍j ...
- javascript监听输入框_html通过JS/jQuery实现 实时监听输入框input的内容
最近在做一个功能:联想搜索功能.具体实现做法如下:通过实时监听输入框input的内容,来实时发起网络请求,向后台获取联想到的搜索内容并展示到前台.那么该如何实现input的实时监听呢 做法一(jQue ...
- 实时监听输入框值变化的完美方案:oninput onpropertychange
实时监听输入框值变化的完美方案:oninput & onpropertychange 原文:实时监听输入框值变化的完美方案:oninput & onpropertychange 在 W ...
- 实时监听input输入框value的变化:
HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件实时监听输入框value的变化 oninput 事件在用户输入时触发. 该事件在 <input&g ...
- angular监听输入框值的变化_angular 实时监听input框value值的变化触发函数方法
用angulajs + ionic 做了一个登陆页面.效果要通过监听输入框的变化来判断登陆按钮是否可点击.当至少一个输入框为空时登录按钮不可点击.一开始是用的jquery的方法做的,后来发现刷新当前页 ...
最新文章
- 【iOS】通过NSURLProtocol提高Web加载速度
- android studio中能用的各种转义字符
- keras 多个显卡
- 好品山东谋定产业扶贫-农业大健康·万祥军:乡村振兴行动
- mc网站服务器设置家怎么圈地,《我的世界》怎么圈地 设置方法教程
- Symbian和C++ SDK开发入门之部署
- Hadoop对小文件的解决方案
- python数据库定时更新脚本——(一)GitPython拉取代码
- python安装pygame教程_python-pygame安装教程
- 操盘机器人新增板块资金流向分析模型,可自定义板块、分析周期以及系统自动学习功能
- IC基础知识3-输入阻抗和输出阻抗
- 威斯康星麦迪逊计算机专业排名,威斯康星大学麦迪逊分校计算机工程学科排名...
- 扒一扒“WEBP格式”的图片
- 解决complex转int的问题
- 计算机桌面机器人,桌面的 Spirit Rover(勇气号探测器),机器人爱好者的心头好!!...
- 《红楼梦》的方位观念
- 最全前端面试问题及答案总结
- 华中科技大学计算机徐永兵,华中科技大学计算机学院导师及科研方向.doc
- Bluetooth core 5.0 Generic Access Profile ---------- 模式 - BR/EDR 物理传输(physical transport)
- Java多态实现人喂养宠物小案例