實時監聽文本框輸入

原創

2020-02-21 06:47

今天遇到一個這樣的需求，需要根據用戶的輸入實時的檢索出已輸入文字匹配的東西出來，提示給用戶看，html 標籤中input的標籤有onchange事件，onfocus事件，onblur事件，其中onchange事件，需要input標籤失去焦點纔會相應，onfocus則是獲得焦點時才相應一次，onblur事件也是失去焦點後才相應，這與需求不太相關，通過不懈的百度以及google找到了一個解決方法，那就是onpropertychange事件，不過此事件存在兼容性問題，在ie下好用，而firefox，chrome等瀏覽器支持，不過有替代方法，那就是oninput事件。具體解決思路：一：在input標籤上同時加上onpropertychange與oninput事件。二：判斷瀏覽器類型，通過addEventListener方式爲非ie瀏覽器添加oninput事件。

方法一源代碼：

<div id="msg"></div> 
<input id='txt' value="" onpropertychange="handle();" οninput="handle();"/> 
<script> 
//當狀態改變的時候執行的函數 
function handle() 
{document.getElementById('msg').innerHTML='輸入的文字長度爲：'+document.getElementById('txt').value.length; 
} 
</script>

方法二源代碼：

<div id="msg"></div> 
<input id='txt' value="" /> 
<script type="text/javascript">
    function handle(){
        document.getElementById('msg').innerHTML="輸入的文字長度爲："+document.getElementById('txt').value.length;
    }
    //firefox下檢測狀態改變只能用oninput,且需要用addEventListener來註冊事件。 
    if(/msie/i.test(navigator.userAgent))    //ie瀏覽器 
        {document.getElementById('txt').onpropertychange=handle 
    } else{//非ie瀏覽器，比如Firefox 
        document.getElementById('txt').addEventListener("input",handle,false); 
    } 
</script>