js实现的文本框内容发生改变立马触发事件简单介绍:
本章节介绍一下如何在文本框的内容发生变化的时候，立马触发一个事件执行响应的操作，而不是像是keydown或者keyup事件一样，只能够检测通过键盘输入导致内容的变化， 下面就通过代码实例做一下简单介绍。

一.相关知识准备:
1.onchange事件:
此事件会在元素内容发生改变，且失去焦点的时候触发。
浏览器支持度较好。
2.onpropertychange事件:
此事件会在元素内容发生改变时立即触发，即便是通过js改变的内容也会触发此事件。
元素的任何属性改变都会触发该事件，不止是value。
只有IE11以下浏览器支持此事件。
3.oninput事件:
此事件会在value属性值发生改变时触发，通过js改变value属性值不会触发此事件。
只有IE8以上或者谷歌火狐等标准浏览器支持。
二.代码实例:
既然知道各个事件的特性，那么我们可以通过兼容性方法，实现兼容各个浏览器的代码。
代码如下:

===================================================

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<script type="text/javascript">

window.onload=function(){

  var otxt=document.getElementById("txt");

  var oshow=document.getElementById("show");

  var count=0;

  if(document.all){

     otxt.onpropertychange=function(){

       count=count+1;

       oshow.innerHTML=count;

     }

  }

  else{

    otxt.oninput=function(){

      count=count+1;

      oshow.innerHTML=count;

    }

  }

}

</script>

</head>

<body>

<div id="show"></div>

<input type="text" id="txt" value="蚂蚁部落"/>

</body>

</html>

===============================================================

propertychange（ie）和input事件
input是标准的浏览器事件，一般应用于input元素，当input的value发生变化就会发生，无论是键盘输入还是鼠标
黏贴的改变都能及时监听到变化
propertychange，只要当前对象属性发生改变。（IE专属的）
但是
oninput 和 onpropertychange 这两个事件在 IE9 中都有个小BUG，
那就是通过右键菜单菜单中的 剪切 和 删除 命令删除内容的时候不会触发，
而 IE 其他版本都是正常的，目前还没有很好的解决方案。

1
2
3
4
5
6
7
$(function(){
            $("input[type='search']").bind('input propertychange',function(){
                //做一些事情
                var val = $(this).val();              
                console.log(val);
            })
        });

　　keypress  就是能监听键盘事件，鼠标复制黏贴操作他就无能为力

change事件  触发事件必须满足两个条件： 
a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）
b）当前对象失去焦点(onblur)

--------------------------------------分割线 --------------------------------------

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

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

<input type="text">

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

$("input:text").bind("input propertychange",function(){

　　console.log($(this).val().length);//打印输入框字符长度
 
});

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

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

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

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

input输入框内容变化实时监听的更多相关文章

  1. 实时监听 JavaScript改变 input 值 input输入框内容 value 变化实时监听

    思路:通过setInterval()方法去定时对比新旧值 当时候JavaScript的onchange 和onpropertychange(注意ie版本) 监听输入框input时间,人为改变值是可以触 ...

  2. 【链接】js监听input输入框内容变化

    https://blog.csdn.net/idomyway/article/details/79078625 $("#input1").bind("input prop ...

  3. javascript如何处理多级的实时监听

    今日工作中遇到需求,要求js代码对表单中的input内容进行实时监听,当input中的值改变时触发一些事件. 按照常规思维,代码很快写完了. $(function () { $("#inpu ...

  4. js监听input输入框值的实时变化实例

    情景:监听input输入框值的实时变化实例 解决方法:1.在元素上同时绑定oninput和onporpertychanger事件 实例:<script type="text/JavaS ...

  5. 实时监听input输入框value的变化：

    HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件实时监听输入框value的变化 oninput 事件在用户输入时触发. 该事件在 <input&g ...

  6. Js/jQuery实时监听input输入框值变化

    前言在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满 ...

  7. jq 实时监听input输入框的变化

    项目需求中有时候需要实时监测 input 的值变化,虽然 input 自身有 focus 和 blur 事件,但是有时候跟需求不符合. 所以实时监听 input 值变化的代码为: $("#i ...

  8. javascript --- 实时监听输入框值的变化

    实时监听文本框值变化是非常常见的功能,通常最简单的办法就是用keyup,keydown来实现,但是这种方法有两个问题,一个是当直接复制粘贴的时候没法监听到事件,另外一个问题是在移动端,使用删除键删除输 ...

  9. js与jquery实时监听输入框值变化方法

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...

随机推荐

  1. .net常用属性

    1.   在ASP.NET中专用属性:               获取服务器电脑名:Page.Server.ManchineName               获取用户信息:Page.User   ...

  2. [Luogu] 遥远的国度

    https://www.luogu.org/problemnew/show/P3979 3种情况 x=root,很显然此时应当查询整棵树 lca(root,x)!=x ,此时直接查询x的子树即可,与换 ...

  3. P4717 快速沃尔什变换FWT 模板题

    #include <bits/stdc++.h> using namespace std; #define rep(i,a,n) for (int i=a;i<n;i++) #def ...

  4. 数据结构实验之二叉树三：统计叶子数 SDUT 3342

    #include <stdio.h> #include <string.h> struct node { char data; struct node *l,*r; }; st ...

  5. linux安装puppeteer

    1.安装 下载淘宝镜像的,可以同时下载puppeteer和chromium下面两条语句即可 npm install -g cnpm --registry=https://registry.npm.ta ...

  6. 冲刺总结——Day7

    [今日进展] 代码整合 码云链接:https://gitee.com/jxxydwt1999/20175215-java/tree/master/GoldPoint 功能测试 注册 登录 运行 [燃尽 ...

  7. mac下iterm配色、半透明与样式设置

    mac下iterm配色.半透明与样式设置 * {display: table-row!important} .MJXp-surd {vertical-align: top} .MJXp-surd &g ...

  8. linux下如何交叉编译util-linux?

    1. 获取源码 wget https://mirrors.edge.kernel.org/pub/linux/utils/util-linux/v2.34/util-linux-2.34.tar.xz ...

  9. 008-多线程-锁-JUC锁-CyclicBarrier【让一组线程到达一个屏障（也可以叫同步点）时被阻塞，直到最后一个线程到达屏障时，屏障才会开门，所有被屏障拦截的线程才会继续运行】

    一.概述 “循环栅栏”.大概的意思就是一个可循环利用的屏障. CyclicBarrier是一个同步辅助类,允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).因 ...

  10. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_19-页面静态化-模板管理-模板存储

    因为没有界面,所以手动的通过操作数据库的方式来存储 比如说要存一个轮播图的模板 把自增的_id去掉 先用测试程序把文件存储到gridFS得到一个gridId,然后拿着这个文件的id 这样就添加好了这一 ...