懒人模板网--最新最全织梦模板,Discuz论坛模板,手机网站模板
当前位置:懒人模板>懒人教程>编程教学>

JS实时获取输入框input中的值

发布时间:2018-08-31 来源:未知 浏览: 关键词:

 实时获取input输入框中的值需要oninput和onpropertychange属性来实现。原因是onpropertychange属性为IE专属,而oninput属性支持大部分浏览器包括IE9及以上的版本。

  oninput与onpropertychange失效的情况: 
   oninput事件:1. 在脚本中改变value时,不会触发;2.从浏览器的自动下拉提示中选取时,不会触发。

例如:

1
2
3
4
5
6
var testinput = document.createElement('input');     
if('oninput' in testinput){ 
    object.addEventListener("input",fn,false); 
}else{ 
    object.onpropertychange = fn; 

 或者

1
2
3
4
5
6
var ie = !!window.ActiveXObject; 
if(ie){ 
    object.onpropertychange = fn; 
}else{ 
    object.addEventListener("input",fn,false); 

 下面举个具体的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            display: block;
            border:1px solid #090;
            width: 200px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            margin: 50px auto;
            text-indent: 2em;
        }
        p{
            width: 180px;
            padding-left: 10px;
            padding-right: 10px;
            height: 40px;
            background: #090;
            color: #fff;
            line-height: 40px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <input type="text" id='btn' disable='disable' value="123">
    <p id="title"></p>
    <script>
        var oBtn = document.getElementById('btn');
        var oTi = document.getElementById('title');
        if('oninput' in oBtn){ 
                oBtn.addEventListener("input",getWord,false); 
            }else{ 
                oBtn.onpropertychange = getWord; 
            }
        // var ie = !!window.ActiveXObject; 
     //    if(ie){ 
     //        oBtn.onpropertychange = getWord; 
     //    }else{ 
     //        oBtn.addEventListener("input",getWord,false); 
     //    } 
        function getWord(){
            oTi.innerHTML = oBtn.value;
        }
    </script>
</body>>
</html

 

责任编辑:懒人模板小编
共有人阅读,期待你的评论!评论
编程教学
二次开发
使用技巧
调试安装
运营推广
IT行业新闻
编程教学
2016-2018 懒人在线网 版权所有:深圳市一路互联信息技术有限公司 备案号:粤ICP备15061805号-1