<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="auther" content="fq" />

    <title>监听输入框值的即时变化 onpropertychange oninput</title>

    <script type="text/javascript">

    function immediately() {

        var element = document.getElementById("mytext");

        if ("\v" == "v") {

            element.onpropertychange = webChange;

        } else {

            element.addEventListener("input", webChange, false);

        }

        function webChange() {

            if (element.value) {

                document.getElementById("test").innerHTML = element.value

            };

        }

    }

    function addValue() {

        document.getElementById("mytext").value = 'dfdsafdsfsfsdfsdfdsf';

        document.getElementById("mytext2").value = 'dfdsafdsfsfsdfsdfdsf';

    }

    </script>

</head>

<body>

    <input type="button" id="txts" value="点击加载值!" onclick="addValue();" /> 直接写在页面中的示例：

    <input type="text" id="mytext2" 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 />

    <input type="text" id="mytext3" 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>

    <script type="text/javascript">

  /*  function fn() {

        console.log(this.a);

    }

    var obj = {

        a: 2,

        fn: fn

    };

    var bar = obj.fn;

    var a = "全局";

    bar();

    <!---->

    var obj = {

        a: 2

    };

    fn.call(obj);

    var obj = {

        a: 3

    }

    fn.apply(obj);

    var a = 10;

    fn.call();

    function Fun(a) {

        this.a = a;

    }

    var bar = new Fun(2);

    console.log(bar.a);

    function fn1() {

        var b = 2;

        this.fn2(); //以为this引用的是fn1的词法作用域

    }

    function fn2() {

        console.log(this.b);

    }

    fn1(); //ReferenceError*/

    </script>

  <!--   <script type="text/javascript" src="socket.io.js"></script> -->

</body>

</html>

监听INPUT值的即时变化的更多相关文章

  1. js监听输入框值的即时变化onpropertychange、oninput

    js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // //   要达到的效果 ...

  2. asp.net，监听输入框值的即时变化onpropertychange、oninput

    作者:自由天堂发布站点:WEB六零零 网页设计制作原文地址:http://www.web600.net/html/editor/JavaScript/201001131529.html 要达到的效果 ...

  3. onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)

    转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...

  4. 原生js监听input值改变事件

    哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http:// ...

  5. 原生js监听input值发生变化

    原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 1) onchange 触发事件必须满足 ...

  6. JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

    JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...

  7. jq 监听input值的变化

    $(".popWeiXing .name").bind("input propertychange", function() { modValue.diyDat ...

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

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

  9. 实时监听 input值的变化

    重点:$('#xx').bind('input propertychange', function() {} 举例子: html: <div ><span id="numb ...

随机推荐

  1. 第三个spring冲刺第1天

    在第二阶段,我们的要实现的基本功能都已经基本是实现了,现在在第三阶段,我们会完善算法的改进.容错问题的兼容还有附加的其他功能,例如计时等

  2. 传参在mybatis的sql映射文件中正确获取

    1.单个参数: 非自定义对象 传参:getStuById(Integer id): 取值:#{id} 单个基本类型参数,随便取值都行:#{ok} 对象: 传参:saveStudent(Student ...

  3. 『编程题全队』Scrum 冲刺博客

    1.介绍小组新加入的成员,Ta担任的角色 Answer: 我们小组的倪兢飞同学决定跳槽到团队あ,我们小组开了一个简短而又严肃的会议,满足倪兢飞同学的意愿,并感谢他为团队做出的巨大贡献.虽然我们遗失了一 ...

  4. 命令行批量修改IP并ping测试

    @echo off set ip=0 :beginset /a ip=%ip%+1netsh interface ip set address "本地连接" static 172. ...

  5. Jmeter 常用断言使用

    响应断言 可根据要测试响应字段和模式匹配规则来设置断言,比如下方截图是匹配返回的结果中是否包含"code:200,",如果包含则表示断言成功,否则失败.响应断言可添加多个,但是多个 ...

  6. Jquery 组 表单select交互选项

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  7. 通过几个例子看sed的模式空间与保持空间

    SED之所以能以行为单位的编辑或修改文本,其原因在于它使用了两个空间:一个是活动的“模式空间(pattern space)”,另一个是起辅助作用的“暂存缓冲区(holdingspace)这2个空间的使 ...

  8. 自定义Label控件

    最近开发过程中有一个需求就是修改label控件的模板,使其能够在鼠标移近的时候变成TextBox,从而方便输入,然后进行相应的修改,最终达到动态修改Label的目的,这里贴出相应的代码,并做简要的分析 ...

  9. RabbitMQ基础知识详解

    什么是MQ? MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.MQ是消费-生产者模型的一个典型的代表,一端往消息队列中不断写入消息,而另一端则可以读取队列中 ...

  10. codeforces431B

    Shower Line CodeForces - 431B Many students live in a dormitory. A dormitory is a whole new world of ...