<!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. Bing词典分析

    0x01 Bug测试结果 本次测试的是Bing词典wp版本V4.5.2,经过测试,共发现如下Bug. 1.更新后,旧版本首页的每日单词与文章推荐不能重新获得,部分搜索历史记录丢失. 2.在单词挑战模式 ...

  2. 毕设之c#多线程学习（官方+转载）

    官方文档,原址:打开 如何:对 Windows 窗体控件进行线程安全调用   使用多线程提高 Windows 窗体应用程序的性能时,必须注意以线程安全方式调用控件. 示例 访问 Windows 窗体控 ...

  3. 结对项目 Pair Project

    结对项目 Pair Project 一人编程,一人操作,共同检查. 源码 https://github.com/dpch16303/test/blob/master/%E5%AE%9E%E8%B7%B ...

  4. 第一个Sprint第一天

    第一个Sprint冲刺的第一天 组员:陈建定 陈友沛 林清松 我们小组选的题目是小学四则运算APP 之前我们都没有做过这个程序,不过我们会尽力完成. 第一阶段的冲刺我们主要分析这个APP的所需的功能, ...

  5. DOM的基本操作

    什么是DOM 1:文档对象模型(DocumentObjectModel,DOM) 2:DOM定义了访问和操作HTML文档的标准方法. 3:DOM将HTML 文档表达为树结构. 其他查询元素的方法: d ...

  6. VMMAP的简单使用

    1. dotnet.exe 进程占用内存非常疯狂.. 开发同事 提供了一个工具进行简单分析 vmmap.exe 执行了 Ctrl+E 之后 发现将 heap 和managed heap 的内容放到了p ...

  7. [转帖].NET Core 2.0 是您的最好选择吗？

    .NET Core 2.0 是您的最好选择吗? https://www.cnblogs.com/vipyoumay/p/7388371.html 1. NET Core 2.0 是您的最好选择吗? 1 ...

  8. bat脚本的写法

    当你每次都要输入相同的命令时,可以把这么多命令存为一个批处理,从此以后,只要运行这个批处理,就相当于打了几行.几十行命令.下面以Nginx服务的停止脚本为例写一个bat批处理文件: 1.新建nginx ...

  9. js regex variable & Set, Map

    js regex variable & Set, Map regex, variable, Set, Map, 交集, 差集, 并集, https://stackoverflow.com/qu ...

  10. Go语言之unsafe包介绍及使用

    unsafe内容介绍 type ArbitraryType int type Pointer *ArbitraryType func Sizeof(x ArbitraryType) uintptr f ...