js 實時監聽輸入框值變化的完美方案：oninput & onpropertychange

時間 2019-11-06

標籤實時監聽輸入變化完美方案 oninput onpropertychange 欄目 JavaScript 简体版

原文原文鏈接

(1) 先說jquery, 使用 jQuery 庫的話，只須要同時綁定 oninput 和 onpropertychange 兩個事件就能夠了，示例代碼：
javascript

$('#username').bind('input propertychange', function() {
    $('#content').html($(this).val().length + ' characters');
});

(2) 對於JS原生寫法而言， oninput 是 HTML5 的標準事件，對於檢測 textarea, input:text, input:password 和 input:search 這幾個元素經過用戶界面發生的內容變化很是有用，在內容修改後當即被觸發，不像 onchange 事件須要失去焦點才觸發。oninput 事件在主流瀏覽器的兼容狀況以下：html

從上面表格能夠看出，oninput 事件在 IE9 如下版本不支持，須要使用 IE 特有的 onpropertychange 事件替代，這個事件在用戶界面改變或者使用腳本直接修改內容兩種狀況下都會觸發，有如下幾種狀況：java

修改了 input:checkbox 或者 input:radio 元素的選擇中狀態， checked 屬性發生變化。jquery
修改了 input:text 或者 textarea 元素的值，value 屬性發生變化。瀏覽器
修改了 select 元素的選中項，selectedIndex 屬性發生變化。this

在監聽到 onpropertychange 事件後，能夠使用 event 的 propertyName 屬性來獲取發生變化的屬性名稱。spa

集合 oninput & onpropertychange 監聽輸入框內容變化的示例代碼以下：code

<head>
    <script type="text/javascript">
    // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
        function OnInput (event) {
            alert ("The new content: " + event.target.value);
        }
    // Internet Explorer
        function OnPropChanged (event) {
            if (event.originalEvent.propertyName.toLowerCase () == "value") {
                alert ("The new content: " + event.srcElement.value);
            }
        }
    </script>
</head>
<body>
    Please modify the contents of the text field.
    <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。