快捷導(dǎo)航

如何利用js實(shí)時(shí)監(jiān)聽input輸入框值的變化

更新時(shí)間：2024年02月01日 14:40:11 作者：可樂(lè)星-

在做web開發(fā)時(shí)候很多時(shí)候都需要即時(shí)監(jiān)聽輸入框值的變化,以便作出即時(shí)動(dòng)作去引導(dǎo)瀏覽者增強(qiáng)網(wǎng)站的用戶體驗(yàn)感,這篇文章主要給大家介紹了關(guān)于如何利用js實(shí)時(shí)監(jiān)聽input輸入框值的變化,需要的朋友可以參考下

實(shí)習(xí)日記之通過(guò)調(diào)用common chemistry的api接口實(shí)現(xiàn)輸入keyword查找cas號(hào)和mw。做了一個(gè)簡(jiǎn)單的html網(wǎng)頁(yè)，用到了ajax技術(shù)。比較簡(jiǎn)單，適合剛?cè)腴T的寶學(xué)習(xí)參考。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="application/javascript">
          function onInputChange(event){
            console.log(event.target.value);
            if(event.target.value == ''){
                document.getElementById("cas").innerText = '';
                document.getElementById("mw").innerText = '';
            }
            
        }
        function loadCAS() {
            // document.getElementById("cas").innerText = '';
            // document.getElementById("mw").innerText = '';
            var flag = 1;
            var searchurl = 'https://commonchemistry.cas.org/api/search?q='; // 獲取 JSON 數(shù)據(jù)的鏈接
            var request;
            if (window.XMLHttpRequest) {
                request = new XMLHttpRequest(); //發(fā)送 Ajax 請(qǐng)求，適用于 Chrome, mozilla 等瀏覽器 
            } else if (window.ActiveXObject) {
                request = new ActiveXObject("Microsoft.XMLHTTP"); // 發(fā)送 Ajax 請(qǐng)求，適用于 IE 瀏覽器 
            }
            var keyword = document.getElementById("keyword").value;
            searchurl += encodeURIComponent(keyword);
            request.open("GET", searchurl, false);
            request.onreadystatechange = function() {
                if (request.readyState == 4 && request.status == 200) {
                    var response = request.responseText;
                    console.log(JSON.parse(response));
                    if(JSON.parse(response).count.toString() =='0'){
                        document.getElementById("cas").innerText = '暫無(wú)數(shù)據(jù)';
                        flag  = 0;
                    }
                    else{
                        document.getElementById("cas").innerHTML = JSON.parse(response).results[0].rn;
                    }
                    
                }else if(request.readyState == 4 && request.status == 404){

                }
            }
            request.send();
            if(flag == 1){
                loadMW();
            }
        }
        function loadMW(){
            var detailurl = 'https://commonchemistry.cas.org/api/detail?cas_rn='; // 獲取 JSON 數(shù)據(jù)的鏈接
            var request;
            if (window.XMLHttpRequest) {
                request = new XMLHttpRequest(); //發(fā)送 Ajax 請(qǐng)求，適用于 Chrome, mozilla 等瀏覽器 
            } else if (window.ActiveXObject) {
                request = new ActiveXObject("Microsoft.XMLHTTP"); // 發(fā)送 Ajax 請(qǐng)求，適用于 IE 瀏覽器 
            }
            var cas = document.getElementById("cas").innerText.toString();
            console.log('loadMW-cas:'+cas);
            detailurl += encodeURIComponent(cas);
            request.open("GET", detailurl, false);
            request.onreadystatechange = function() {
                if (request.readyState == 4 && request.status == 200) {
                    var response = request.responseText;
                    console.log(JSON.parse(response));
                    document.getElementById("mw").innerHTML = JSON.parse(response).molecularMass;
                }else if(request.readyState == 4 && request.status == 404){

                }
            }
            request.send();
        }
    </script>

</head>
<body>
    <label for="keyword"> Keyword: </label>
   <input type="text" id="keyword" name="keyword"  oninput="onInputChange(event)" >
 <br>

 <div>
     CAS: <span id="cas"></span>
 </div>
 <div>
     MW: <text id="mw"></text>
 </div>
   
    <button type="button" onclick="loadCAS()">點(diǎn)擊加載</button>

</body>

</html>

過(guò)程中遇到的問(wèn)題：當(dāng)我清空keyword值后，上一次搜索的cas和mw依然存在。

方案一：js實(shí)時(shí)監(jiān)聽input輸入框值的變化，需要用到input監(jiān)聽事件：

   <input type="text" id="keyword" name="keyword"  oninput="onInputChange(event)" >

調(diào)用對(duì)應(yīng)的js監(jiān)聽函數(shù)：

 function onInputChange(event){
            console.log(event.target.value);
            if(event.target.value == ''){
                document.getElementById("cas").innerText = '';
                document.getElementById("mw").innerText = '';
            }
            
        }

剛開始在這里踩了個(gè)坑，我以為event.target.value的值是null，所以條件寫成了if(event.target.value == null)，數(shù)據(jù)一直無(wú)法清空。后來(lái)我改成了空字符串if(event.target.value == '')就對(duì)了。

方案二：在點(diǎn)擊加載按鈕的時(shí)候，先將元素內(nèi)容清空再進(jìn)行ajax請(qǐng)求，直接在點(diǎn)擊事件觸發(fā)的方法里清空數(shù)據(jù)即可。

//點(diǎn)擊事件 
function loadCAS() {
   document.getElementById("cas").innerText = '';
   document.getElementById("mw").innerText = '';
        ......
}

附j(luò)Query用法：

$("#input1").bind("input propertychange",function(event){
       console.log($("#input1").val())
});

總結(jié)

到此這篇關(guān)于如何利用js實(shí)時(shí)監(jiān)聽input輸入框值變化的文章就介紹到這了,更多相關(guān)js實(shí)時(shí)監(jiān)聽input輸入框值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: