<!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. [BUAA软工]第二次博客作业---结对编程

    [BUAA软工]结对作业 项目 内容 这个作业属于哪个课程 北航软工 这个作业的要求在哪里 2019年软件工程基础-结对项目作业 我在这个课程的目标是 学习如何以团队的形式开发软件,提升个人软件开发能 ...

  2. sql 语句的先后执行顺序

    例:查询语句中select from where group by having order by的执行顺序 一般以为会按照逻辑思维执行,为: 查询中用到的关键词主要包含六个,并且他们的顺序依次为  ...

  3. 基于SSH框架的在线考勤系统开发的质量属性

    我要开发的是一个基于SSH框架的在线考勤系统. 质量属性是指影响质量的相关因素,下面我将分别从6个系统质量属性(可用性,易用性,可修改性,性能,安全性,可测试性)来分析我的系统,以及如何实现这些质量属 ...

  4. “数学口袋精灵”App的第三个Sprint计划----开发日记(第十一天12.17)

    项目进度: 基本完成一个小游戏,游戏具有:随机产生算式,判断对错功能.通过轻快的背景音乐,音效,给玩家提供一个良好的氛围.  任务分配: 冯美欣:设计"数学口袋精灵"App图标.整 ...

  5. Vue中常用的三种传值方式

    父传子 父子组件的关系可以总结为prop向下传递,事件向上传递.父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息. 父组件: <template> <div> ...

  6. 求两个整数的最大公约数GCM

    思路分析: (1)求差判定法:  如果两个数相差不大,可以用大数减去小数,所得的差与小数的最大公约数就是原来两个数的最大公约数．例如:求78和60的最大公约数．78-60＝18,18和60的最大公约数 ...

  7. [转帖]召冠总的 Oracle常用的性能诊断语句. --保存学习备查

    Copyfrom https://www.cnblogs.com/zhaoguan_wang --1.阻塞及等待事件信息查询-- 查询所有会话的状态.等待类型及当前正在执行的SQL脚本select t ...

  8. centos7 搭建svn服务器

    1.安装svn服务器: yum install subversion 2.配置svn服务器: 建立svn版本库根目录及相关目录即svndata及密码权限命令svnpasswd: mkdir -p /a ...

  9. Python——反射

    反射的定义:使用字符串类型的名字 去操作变量 hasattr 函数 与getatter配合使用,用来判断变量是否存在 if hasatter(my,'a'):#如果为真执行 getatter(my,' ...

  10. RSA，JAVA私钥加密，C#公钥解密

    做这个东西在坑里爬了3天才爬出来,记录下供园友参考.C#程序员一枚,项目需要和Java做数据交互,对方甩了段密文和一个CER证书给我,然后我要对其密文进行解密. RSA 非对称加密,对方用私钥加密,我 ...