js实时监听input的值的变化,改变(change)事件

来源:赵克立博客分类: 前端开发标签：--发布时间:2017-05-20 18:55:38最后更新:2017-07-09 09:25:19浏览:4300

本文为博主原创文章，转载请声明原文链接...谢谢。o_0。

原文链接:

http://www.zhaokeli.com /article/8141.html

更新时间：

2017-07-09 09:25:19

温馨提示：

学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

$('#search_value input').bind('input propertychange', function(event) {
	console.log($(this).val());
});

下面是使用原生的js来实现

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>输入框改变事件</title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="描述" />
    <script type="text/javascript">
    function OnInputChange(event) {
        // debugger;
        if (event.propertyName && event.propertyName.toLowerCase() == "value") {
             // Internet Explorer
            document.getElementById('content').innerHTML = event.srcElement.value;
        } else {
            // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
            document.getElementById('content').innerHTML = event.target.value;
        }
    }
    </script>
</head>
<body> 输入变化: <b id="content"></b>
    <br>
    <input type="text" oninput="OnInputChange(event)" onpropertychange="OnInputChange(event)" value="a" />
</body>
</html>

oninput是ie9以上以及谷歌火狐等主流浏览器都支持的属性

onpropertychange这个是ie9以下ie支持的属性