<!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. Linux实践：模块

    标签(空格分隔): 20135321余佳源 一.实践原理 Linux模块是一些可以作为独立程序来编译的函数和数据类型的集合.之所以提供模块机制,是因为Linux本身是一个单内核.单内核由于所有内容都集 ...

  2. 同步手绘板——android端下笔后颜色变化

    实现效果 : 在设计之初我们以为是改变笔线条的粗细来实现类似效果,后来通过找其他相关软件比对发现是不改变线条的粗细,通过改变透明度实现下笔后颜色的渐变,虽然已实现,但渐变效果很一般,不流畅,算法还待优 ...

  3. navicat有数据额结构同步

    这个功能可能检查两个库的表结构异同,进行表结构构同步,可以生成同步语句. 比如在测试环境表中新增了字段,可以通过这个工具进行表结构同步.

  4. SQL语句及5.7.2 mysql 用户管理

    一.用户的定义 1.1 用户名+主机域 此处为5.7.2版本的mysql当中password字段已改为authentication_string mysql> select user,host, ...

  5. jQuery（六）

    $下常用方法 $().xxx:只能给jq对象用 $.xxx不仅可以给jq用也可以给原生js用,叫做工具方法 $.type() <script> $(function(){ var a= n ...

  6. win8和win7下解决php5.3和5.4、5.5等不能加载php_curl.dll的终极解决办法 收藏

    win8和win7下解决php5.3和5.4.5.5等不能加载php_curl.dll的终极解决办法 收藏2015年01月11日 最近分别在WIN7和Windows8 上分别安装php 高版本!都遇到 ...

  7. [转帖]ARM 相关内容

    ARM内核全解析,从ARM7,ARM9到Cortex-A7,A8,A9,A12,A15到Cortex-A53,A57 http://www.myir-tech.com/resource/448.asp ...

  8. 牛客网练习赛7-B-购物

    在遥远的东方,有一家糖果专卖店. 这家糖果店将会在每天出售一些糖果,它每天都会生产出m个糖果,第i天的第j个糖果价格为C[i][j]元. 现在的你想要在接下来的n天去糖果店进行选购,你每天可以买多个糖 ...

  9. ansible系列2-常用命令

    copyansible oldboy -m copy -a "src=/etc/hosts dest=/tmp/ mode=0600 owner=oldboy group=oldboy &q ...

  10. BZOJ3159决战——树链剖分+非旋转treap(平衡树动态维护dfs序)

    题目描述 输入 第一行有三个整数N.M和R,分别表示树的节点数.指令和询问总数,以及X国的据点. 接下来N-1行,每行两个整数X和Y,表示Katharon国的一条道路. 接下来M行,每行描述一个指令或 ...