JavaScript實時監聽input中值變化

凌浩雨發表於2018-05-15
JavaScript
程式碼

方式一：

<!DOCTYPE html>
<html>
<head>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <title>測試</title>
</head>
<body>
    <input class="et-name" type="input" name="name">

    <script type="text/javascript">
        $(function () {
            $(".et-name").bind("input propertychange", function () {
                console.log($(".et-name").val());
            });
        });
    </script>
</body>
</html>

方式二：

<!DOCTYPE html>
<html>
<head>
    <title>測試</title>
</head>
<body>
    <input class="et-name" type="input" name="name" oninput="myFun()">

    <script type="text/javascript">
        function myFun() {
            console.log($(".et-name").val());
        }
    </script>
</body>
</html>

方式三：

<!DOCTYPE html>
<html>
<head>
    <title>測試</title>
</head>
<body>
    <input class="et-name" type="input" name="name" onchange="myFun()">

    <script type="text/javascript">
        function myFun() {
            console.log($(".et-name").val());
        }
    </script>
</body>
</html>

類似於，實現微博的‘還能輸入xxx個字元’

oninput,onpropertychange,onchange的用法

onchange觸發事件必須滿足兩個條件：
a）當前物件屬性改變，並且是由鍵盤或滑鼠事件激發的（指令碼觸發無效）
b）當前物件失去焦點(onblur)；
onpropertychange的話，只要當前物件屬性發生改變，都會觸發事件，但是它是IE專屬的；
oninput是onpropertychange的非IE瀏覽器版本，支援firefox和opera等瀏覽器，但有一點不同，它繫結於物件時，並非該物件所有屬性改變都能觸發事件，它只在物件value值發生改變時奏效。


相關文章