JS监听输入框值变化兼容 onpropertychange、oninput
onpropertychange 属IE
oninput 属除IE外(Chrome、Firefox、SS)
所以肯简单的办法嘛:
1. 一个input里面写两个属性事件
2.写在JS中判断浏览器添加监听事件
<script type="text/javascript">
function immediately() {
element = document.getElementById("mytext");
if (window.ActiveXObject) {
element.onpropertychange = webChange;
} else {
element.addEventListener("input", webChange, false);
}
}
function webChange() {
if (element.value) {
document.getElementById("test").innerHTML = element.value;
}
;
}
</script> Input:
<input type="text" name="textfield" oninput="document.getElementById('webtest').innerHTML=this.value;" onpropertychange="document.getElementById('webtest').innerHTML=this.value;" />
<div>您输入的值为:<span id="webtest"></span></div>
<br /><br /><br /><br /><br />
JS:
<input type="text" name="textfield" id="mytext" />
<div>您输入的值为:<span id="test"></span></div>
<script type="text/javascript">
immediately();
</script>
效果:
JS监听输入框值变化兼容 onpropertychange、oninput的更多相关文章
- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
- 实时监听输入框值变化:oninput & onpropertychange
结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. oninput 是 HTML5 的标准事件,对于检测 textarea, i ...
- 实时监听输入框值变化的完美方案:oninput & onpropertychange
实时监听输入框值变化的完美方案:oninput & onpropertychange: 网址:http://www.cnblogs.com/lhb25/archive/2012/11/30/o ...
- html5 实时监听输入框值变化的完美方案:oninput & onpropertychange
结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. H5手机端: <input type="text" ...
- jquery实时监听输入框值变化
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...
- HTML5 oninput实时监听输入框值变化的完美方案
在网页开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快 ...
- js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange
(1) 先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').bin ...
- js与jquery实时监听输入框值变化方法
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...
- 【转载】实时监听输入框值变化的完美方案:oninput & onpropertychange
oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有 ...
随机推荐
- linux下mnt目录作用
linux下mnt目录作用 一.mount 英文解释 登上; 爬上; 攀登; 骑上; 乘上; 跨上 可直接理解为“挂载” 挂接光驱.USB设备的目录,加载后,会在mnt里多出相应设备的目录.mnt是m ...
- Python Day17
jQuery jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在 ...
- PHP安装kafka插件
在工作中我们经常遇到需要给php安装插件,今天把php安装kafka的插件的步骤整理下,仅供大家参考 1:需要先安装librdkafka git clone https://github.com/ed ...
- Windows下搭建PHP开发环境
PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...
- 在 .NET 中开发基于 Chrome 内核的浏览器-创建一个简单浏览器
首先在 http://www.cftea.com/tools/downloads/Cef.zip 下载文件包. 一.将文件解压拖入到 Visual Studio 对应的 WinForm 项目中. 二. ...
- Echarts 饼图标题文字换行问题
var option = { title : { text: '数据来源', x:'center' }, tooltip : { trigger: 'item', formatter: "{ ...
- DataGridView实现各种效果
http://www.cnblogs.com/greatverve/archive/2012/03/05/multi-datagridview.html
- SDC Tcl package of Timequest
Tcl comand Tcl Commands all_clocks all_inputs all_outputs all_registers create_clock create_generate ...
- 腾讯开放平台web第三方登录获取信息类(包含签名)
不清楚具体参数的可以先看下第三方登录的文档: class QQ { //$appid 你的appid //$openid 获取到的唯一的用户openid //$openkey 获取到的openkey ...
- MyBK