js/jquery 实时监听输入框值变化的完美方案：oninput & onpropertychange

82473264 2014-07-01

(1)     先说jquery, 使用 jQuery 库的话，只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了，示例代码： 

$('#username').bind('input propertychange', function() { 
    $('#content').html($(this).val().length + ' characters'); 
});

 
(2)　 对于JS原生写法而言， oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下：
js/jquery 实时监听输入框值变化的完美方案：oninput & onpropertychange
　　从上面表格可以看出，oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：

修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。
修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
修改了 select 元素的选中项，selectedIndex 属性发生变化。
　　在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。

　　集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下：

<head>
    <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>
</head>
<body>
    Please modify the contents of the text field.
    <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />
</body>
82473264

82473264

相关推荐

jQuery UI组件库使用技巧小分享，让移动、Web界面开发更简单！

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQue

EdwardSiCong / 0评论 2020-11-23

详解Vue数据驱动原理

Vue区别于传统的JS库，例如JQuery，其中一个最大的特点就是不用手动去操作DOM，只需要对数据进行变更之后，视图也会随之更新。比如你想修改div#app里的内容:. 在代码层面上的最大区别就是，JQuery直接对DOM进行了操作，而Vue则对数据进行

85477104 / 0评论 2020-11-17

JavaScript枚举选择jquery插件代码实例

聪明的朋友马上想出办法：用两个选项为周一到周日的下拉列表实现，对 那样可以，但是我觉得不够友好，所以利用业余时间写下了这个jQuery小插件。weeks: [{ text: '一', value: 2 }, { text: '二', value: 3 },

hhanbj / 0评论 2020-11-17

7个 jQuery上手项目，Github超千人star

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功

81427005 / 0评论 2020-11-11

jQuery实现带进度条的轮播图

margin: 0;padding: 0;list-style: none;width: 100%;height: 600px;position: relative;width: 100%;height: 600px;position: absolute;

seoppt / 0评论 2020-09-13

jQuery实现鼠标拖拽登录框移动效果

<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>. $(&

honeyth / 0评论 2020-09-13

jquery实现简易验证插件封装

<input type="text" id="username" name="username" tabindex="1" class="format-inpu

WRITEFORSHARE / 0评论 2020-09-13

jQuery实现朋友圈查看图片

<a href="images/img1-large.png" style="background-image:url" title="图片一"></a>

84483065 / 0评论 2020-09-11

jQuery实现日历效果

jquery是用的是2.0版本。--基于W3C标准 不用做任何修改-->. --设置初始化文档信息和文档管理标注-->. --整个页面编码 utf-8 国际编码 通用性最强，GBK/gb2312 中文-->. .signincalenda

momode / 0评论 2020-09-11

jQuery中event.target和this的区别详解

　　1.js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远指向触发事件的DOM元素本身；　　2.this和event.target都是dom对象，使用jQuey中的方法可以将他们转换为jquery对象：$和$.比如,

85477104 / 0评论 2020-08-15

9.jQuery初识—选择器、效果

书写繁琐，代码量大。动画效果很难实现。使用定时器，要小心各种定时器的清除。各种操作和处理事件不好实现。浏览器的兼容性。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。插件扩展开发，jQuery有着丰富的第三方插件，

83510998 / 0评论 2020-08-08

Kendo UI for jQuery数据管理使用教程：PDF导出（二）

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQue

82550495 / 0评论 2020-08-03

JQuery 06 属性

区别在于，对于自定义属性和选中属性的处理。选中属性指的是 checked,selected 这2种属性1. 对于自定义属性 attr能够获取，prop不能获取2. 对于选中属性attr只能获取初始值， 无论是否变化prop 能够访问变化后的值，并且以tru

tthappyer / 0评论 2020-08-03

取代Jquery，用Vue 构建Bootstrap 4 应用

尽管前端程序现在发展迅速，各种框架层出不穷，但是对广大非前端码农来说构建Web界面的最好的选择仍然还是Bootstrap 4。但是Bootstrap依赖于已经严重过时，被抛弃的jQuery组件，那么如何解决这个问题就迫在眉睫了。Vue项目以其轻巧、高性能，

84901334 / 0评论 2020-07-28

隐式迭代---ES5的数组方法以及jQuery的方法调用

对于选择器筛选的dom元素，比如$是一个伪数组jq对象，存放的dom元素，当执行addClass方法，对于每个dom元素都执行此方法，在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用如果获取的

tthappyer / 0评论 2020-07-25

jQuery Ajax 操作函数汇总

jQuery 库拥有完整的 Ajax 兼容套件。执行异步 HTTP 请求。当 Ajax 请求完成时注册要调用的处理程序。在 Ajax 请求发送之前显示一条消息。使用 HTTP POST 请求从服务器加载数据。

TONIYH / 0评论 2020-07-22

jQuery validate验证表单隐藏域

function validInfoForm(){ return $.validate({ ignore : "",//验证隐藏域,解决切换标签后隐藏域无法验证问题 rules: { oldPassword: { requi

tztzyzyz / 0评论 2020-07-20

asp.net 利用Ajax和Jquery在前台向后台传参数并返回值

public static string GetValueAjax//这个方法需要是静态的方法要用到关键字static. json=" + username,//ajaxtest.ashx为目标文件

83510998 / 0评论 2020-07-18

Ant-design中使用jQuery

‘window.jQuery‘: ‘jquery‘,上面代码使用了 webpack 的 ProvidePlugin 插件，这个插件在加载某个模块时，如果遇到了未定义的并且在配置文件中配置了的变量，比如上面代码看到的 $、jquery、jQuery、wind

81463166 / 0评论 2020-07-17

56-58-前端-jQuery

python导入模块发生了哪些事？"""我不想下载jQuery文件 能不能使用呢？w.fn.init [p.c1, prevObject: w.fn.init]0: p.c1length: 1prevObject: w.fn.

tztzyzyz / 0评论 2020-07-05

jQuery ajax - ajax() 方法中的一些属性

jQuery ajax - ajax() 方法中的一些属性

Web全栈笔记 / 0评论 2020-07-06

jQuery.extend 函数使用详解【转】

Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，在此，我们一起去了解了解。它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的

tthappyer / 0评论 2020-07-04

jquery基本用法

<script src="jquery.js"></script> //jquery.js 导入本地文件路径。var d1 = $; -- 得到jquery对象 -- jQuery.fn.init[div#d1

87281248 / 0评论 2020-07-04

jquery-实现加入购物车效果

jquery中提供了很多方便的方法，本案例使用jquery的动画、获取鼠标手机位置、创建dom以及删除dom等方法，实现加入购物车，即点击当前物品滑入购物车

87281248 / 0评论 2020-07-04

jQuery基础及选择器2

$.css;//同辈元素选择器。$.css;//a标签带有class属性

e度空间 / 0评论 2020-06-28

jQuery方法（1）

　　jq是将原生js中的DOM操作全部封装了，可以增删改查，添加事件、修改内容样式、ajax事件、js动画。　　8.找到某个元素的所有结构父级，直到html为止：$.parents()//找到索引为3的li所有父级。　　　　$.find//找到div标签下

82244951 / 0评论 2020-06-28

JQuery之事件

- blur 失去焦点事件。- mouseenter 鼠标进入事件。- change 改变事件，如：文本框值改变，下拉列表值改变等。- keydown 键盘按下事件。最早采用的是 bind、delegate等方式绑定的。jQuery 1.7版本后，jQue

delmarks / 0评论 2020-06-28

jQuery基础及选择器（二）

同辈元素选择器$.css;$.css;//a标签带有class属性。<input name="show" type="button" value="显示隐藏的P元素" id="s

89510194 / 0评论 2020-06-27

jquery获取动态修改后的data值，data()函数不能获取最新的数据

但是动态修改过以后，使用data方法，一直都是以前的值。$.on(‘change keyup changed‘, ".fieldlistsub input.neibu,.fieldlistsub textarea.neibu,.fieldlist

89510194 / 0评论 2020-06-27

Jquery属性和元素操作，ajax

after() 在备选元素之后插入内容，同步即指一件事干完之后再干下一件事，这是在设计ajax时基于安全的考虑，其实就相当于从页面上发送http请求，先通过js代码加密，然后通过ajax发送请求。dataType:‘json‘, // 期望后台返回的数

wcqwcq / 0评论 2020-06-26

TypeScript（20）： 声明文件

TypeScript 作为 JavaScript 的超集，在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法，但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题，需要将这些库里

88570299 / 0评论 2020-06-26

jquery: carousel arrow click

实现原理：父元素为定宽定高相对定位，且overflow：hidden，子元素为绝对定位高度继承父元素，宽度可计算或设置一个大值，通过绝对定位的left来决定显示的子元素

小仙儿 / 0评论 2020-06-25

025_为什么JavaScript变量以美元符号开头?

jquery中的一个非常常见的用途是将存储在变量中的jquery对象与其他变量区分开来。var $email = $; // refers to the jQuery object representation of the dom object. var

88570299 / 0评论 2020-06-18

Vue 中引入jquery

在vue2中引用jq，如下

Web全栈笔记 / 0评论 2020-06-15

Jquery中的Ajax

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。至于技术

delmarks / 0评论 2020-06-14

jQuery部分选择器示例

jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装。它能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率。=test]").css;});});二、通过过滤选择器选择元素1.基本

牵手白首 / 0评论 2020-06-14

基于bootstrap的jQuery多级列表树插件-解决父子节点勾选状态联动

① 如果勾选了父级节点，怎么让子节点全部变为勾选状态？③若果子节点都取消了，怎么让所有父节点都变为未选择状态？.htmleaf-header{margin-bottom: 15px;font-family: "Segoe UI", &q

83510998 / 0评论 2020-06-14

Jquery ajax书写方法代码实例解析

Ajax在前端的应用极其广泛，因此，我们有必要对其进行总结，以方便后期的使用。　　可以异步请求服务器的数据，实现页面数据的实时动态加载， 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。jquery在全局对象jquery绑定了ajax

ppsurcao / 0评论 2020-06-14

jquery隐式迭代（遍历内部dom元素） jquery设置样式方法

jquery设置样式方法。jquery隐式迭代

SIMONDOMAIN / 0评论 2020-06-14

css: jquery login status control

<span class="actived">手机动态码登录</span>. <span>账号密码登录</span>. <input type="text" pla

tianzyc / 0评论 2020-06-13

jQuery模糊匹配checkbox全选 value实现checkbox部分或全部全选

在工作中经常会用到checkbox的全选功能，平时大家用得最多的全选和反选是第一种，一般都是基于全部名称相同的checkbox进行实现，这种全选比较简单。$.attr;//全选所有id前缀为new的checkbox

82244951 / 0评论 2020-06-12

jQuery 最新版 和 jquery-1.12.3下载

[写的更少，做的更多。因为，jQuery 从第二个大版本开始，已经不支持低版本IE了。

89510194 / 0评论 2020-06-11

Uncaught TypeError: $(...).on is not a function

今天写个页面，引入了几个轮子。结果运行发现，jQuery的on方法，结果报错了：Uncaught TypeError: $(...).on is not a function. 网上查了一下，发现是 引入的 jQuery版本的问题。简单分析了一下，为什么会

83510998 / 0评论 2020-06-11

jquery根据name属性查找

$ 选择所有的name属性等于‘keleyicom‘的input元素。$ 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以keleyi结尾的元素根据name取值：$.val()根据id取值:. -----jquery添加删除样式

开心就好 / 0评论 2020-06-10

bili之前端超神之路jquery1004

jquery的使用：函数使用，对象使用

88570299 / 0评论 2020-06-08

JQuery使用Ajax调用后台方法

data: "{‘str‘:‘aaa‘,‘str2‘:‘bbb‘}",

春雨的雕刻时光 / 0评论 2020-06-08

jQuery-事件

// 当页面框架加载完成之后，执行内部代码。// 触发事件时，都会执行此匿名函数。$代表当前触发的标签。

83510998 / 0评论 2020-06-07

jQuery中的Ajax

data: { name: ‘zhangsan‘, age: ‘20‘ },如果想要传递json格式的属性，需要将contentType设置为application/json，并且在data属性中传递一个json字符串。beforesend方法允许我们在请

tthappyer / 0评论 2020-06-07

jQuery Mobile 表单

jQuery Mobile 会自动为 HTML 表单自动添加样式，让它们看起来更具吸引力，触摸起来更具友好性。每个表单元素必须有一个唯一的 "id" 属性。这是因为 jQuery Mobile 的单页导航机制使得多个不同页面在同一时间被

delmarks / 0评论 2020-06-07

jQuery Mobile 表单滑动条

<form method="post" action="demoform.php"><label for="points">进度:</label><inp

牵手白首 / 0评论 2020-06-07