zoukankan      html  css  js  c++  java
  • Js/jQuery实时监听input输入框值变化

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

    首先看一下dom中元素事件:

    onpropertychange: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获。onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 在用js脚本改动该元素值时候亦能触发onpropertychange事件。
    oninput:是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。
    onchange: (a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效);(b)当前对象失去焦点(onblur);
    jQuery用法
    $("#input1").bind("input propertychange",function(event){
    console.log($("#input1").val())
    });

    原生Js
    <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>
    //Input标签
    <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />

    项目中遇到一个问题:在input上加了一个监听事件

    $('#inputId').bind('input propertychange', function() {
        dosomethig...
    });

    但我在使用Js改变这个input的值后,监听事件并不能触发

    原因:

        使用Js动态改变input的值时,没有任何鼠标和键盘的事件,所以并不能触发监听

    解决:

        在Js改变这个值之前加上一句话:$("#inputId").trigger("input");  问题得以解决

  • 相关阅读:
    计算机组成原理1.1.1 课程简介
    【Mybatis】配置文件加载属性
    【Maven】项目中没有resources目录
    C语言指针(三)指针传递给函数
    C语言指针(二)指向指针的指针
    C语言指针(一)
    cygwin环境c语言开发
    【Centos7】安装nginx
    【Linux】管理在线用户
    【总结】偏序/数点
  • 原文地址:https://www.cnblogs.com/jxldjsn/p/10917092.html
Copyright © 2011-2022 走看看