jquery实时监听输入框值变化

2018-04-03 10:21:35

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

首先看一下dom中元素事件： 
onpropertychange： IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 在用js脚本改动该元素值时候亦能触发onpropertychange事件。 
oninput： 是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。 
onchange： (a)当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）；(b)当前对象失去焦点(onblur)；

因此，可以采用以下代码实时监听输入框值变化

$("#input_test1").bind("input propertychange change",function(event){
        $("#input_test2").val($("#input_test1").val());
});

  • 精彩推荐

  • 2020-01-17 23:21:54

    webpack打包优化之外部扩展externals的实际应用

    使用vue-cli创建项目，使用webpack打包。其中，有一个webpack优化webpack.optimize.CommonsChunkPlugin，它会将node_modules中的必需模块提取到vendor文件中，项目开发中，增加第三方模块，比如element-ui、vue-echarts等，vendor的包都会增大。这个时候，就需要考虑减轻vendor包的大小，增加构建速度。我们可以使用webpack的外部扩展(externals)功能。

  • 2020-01-18 01:26:59

    anyProxy使用注意事项

    anyproxy-ca 运行这个命令，如果是mac电脑他会提醒你去通过证书。

  • 2020-01-18 08:54:06

    利用localStorage来处理你的Javascript脚本错误

    localStorage作为HTML5中的新特性，它的出现可以说对于前端性能体验来讲可以获得相当大的改善。存储一些用户经常用到而又不是涉及隐私和安全的东西，的确是一个非常好的选择。下面分享一下用localStorage来处理客户端代码错误的例子来了解一下它的用途吧。

  • 2020-01-20 08:29:14

    js如何生成唯一标识符UUID

    在JavaScript中生成uuid的代码如下，这个函数会直接给你返回uuid，所以直接调用，然后用变量接收即可！