<!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. HDOJ1287_破译密码

    一道正常简单题 曲折解题 做这题的时候看了很久没有看懂是什么意思,最后以为是一道单独的数学题把B这个大写字母猜出来进行异或运算,还不知道C里面异或运算可以直接有符号的:),导致又去学习了一下十进制转换 ...

  2. 探索guava(一)——前置条件Preconditions类

    作用 可以简洁的完成参数检验,在进行业务逻辑代码前进行前置判断.并且避免了冗长的if语句.guava将所有检验的API都放置于Preconditions类中. API Preconditions类大致 ...

  3. 腾讯 xtestserver 基本使用教程~

    刚刚简单录制了下 腾讯demo的基本测试脚本 成功~get新技能成功~开心ing~ 体验就是: 1.各种安卓机找开发者中心选项的usb调试模式太难找了.. 2.不管录制还是播放录制时都感觉好慢... ...

  4. Gradle下载类库源码

    https://blog.csdn.net/xiaoxing598/article/details/68958383 备选:https://www.cnblogs.com/yoyotl/p/62917 ...

  5. java面向对象的核心思想

    java面向对象的特征之一:封装 1.封装性的使用 package edu.tongji.classdemo; /* 封装性 1.封装的目的:保护某些属性和方法不被外部所见 2.封装的实现 为属性和方 ...

  6. 关于python 文件操作os.fdopen(), os.close(), tempfile.mkstemp()

    嗯.最近在弄的东西也跟这个有关系,由于c基础渣渣.现在基本上都忘记得差不多的情况下,是需要花点功夫才能弄明白. 每个语言都有相关的文件操作. 今天在flask 的例子里看到这样一句话.拉开了文件操作折 ...

  7. 一个很初级的错误　Destructor忘记override导致内存泄露

      TxxObj= class    public     Destructor Destroy(); override;!!!此处若无override,将导致内存泄露     end; Destru ...

  8. codeforces146A

    Lucky Ticket CodeForces - 146A Petya loves lucky numbers very much. Everybody knows that lucky numbe ...

  9. BZOJ2141排队——树状数组套权值线段树(带修改的主席树)

    题目描述 排排坐,吃果果,生果甜嗦嗦,大家笑呵呵.你一个,我一个,大的分给你,小的留给我,吃完果果唱支歌,大家 乐和和.红星幼儿园的小朋友们排起了长长地队伍,准备吃果果.不过因为小朋友们的身高有所区别 ...

  10. Json 转 dynamic

    直接上代码: var model = JsonConvert.DeserializeObject<dynamic>("{\"ResponseResult\": ...