如何利用js實(shí)時監(jiān)聽input輸入框值的變化
更新時間：2024年02月01日 14:40:11 作者：可樂星-
在做web開發(fā)時候很多時候都需要即時監(jiān)聽輸入框值的變化,以便作出即時動作去引導(dǎo)瀏覽者增強(qiáng)網(wǎng)站的用戶體驗感,這篇文章主要給大家介紹了關(guān)于如何利用js實(shí)時監(jiān)聽input輸入框值的變化,需要的朋友可以參考下
實(shí)習(xí)日記之通過調(diào)用common chemistry的api接口實(shí)現(xiàn)輸入keyword查找cas號和mw。做了一個簡單的html網(wǎng)頁，用到了ajax技術(shù)。比較簡單，適合剛?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 請求，適用于 Chrome, mozilla 等瀏覽器
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP"); // 發(fā)送 Ajax 請求，適用于 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 = '暫無數(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 請求，適用于 Chrome, mozilla 等瀏覽器
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP"); // 發(fā)送 Ajax 請求，適用于 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>過程中遇到的問題：當(dāng)我清空keyword值后，上一次搜索的cas和mw依然存在。
方案一：js實(shí)時監(jiān)聽input輸入框值的變化，需要用到input監(jiān)聽事件：
<input type="text" id="keyword" name="keyword" oninput="onInputChange(event)" >
調(diào)用對應(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 = '';
}
}剛開始在這里踩了個坑，我以為event.target.value的值是null，所以條件寫成了if(event.target.value == null)，數(shù)據(jù)一直無法清空。后來我改成了空字符串if(event.target.value == '')就對了。
方案二：在點(diǎn)擊加載按鈕的時候，先將元素內(nèi)容清空再進(jìn)行ajax請求，直接在點(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í)時監(jiān)聽input輸入框值變化的文章就介紹到這了,更多相關(guān)js實(shí)時監(jiān)聽input輸入框值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript中Array常用方法的相關(guān)資料,JavaScript的Array對象提供多種方法,涵蓋創(chuàng)建、增刪、查找、遍歷、轉(zhuǎn)換、排序等操作,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2025-06-06
JavaScript中CommonJS 與 ES Modules的區(qū)別
本文主要介紹了JavaScript中CommonJS 與 ES Modules的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2026-03-03
JSON是一種基于文本的數(shù)據(jù)交換方式，或者叫做數(shù)據(jù)描述格式，這篇文章主要介紹了JS跨域交互(jQuery+php)之jsonp使用心得的相關(guān)資料，非常不錯，具有參考借鑒價值，需要的朋友一起學(xué)習(xí)吧2016-07-07
js跨瀏覽器實(shí)現(xiàn)將字符串轉(zhuǎn)化為xml對象的方法
將字符串轉(zhuǎn)化為xml對象需要注意的是該死的ie多版本的問題，具體實(shí)現(xiàn)如下，感興趣的朋友不妨參考下本文，希望對大家有所幫助2013-09-09
innerhtml用法 innertext用法 以及innerHTML與innertext的區(qū)別
innerhtml用法 innertext用法 以及innerHTML與innertext的區(qū)別，看完這個大家以后在實(shí)際應(yīng)用中，就可以選擇合適的方法。盡可能的考慮到兼容性。2009-10-10
JavaScript實(shí)現(xiàn)千位分隔符幾種常見方法
將普通的數(shù)字轉(zhuǎn)換為帶千位分隔符格式的數(shù)字字符串是一個非常常見的問題,這篇文章主要介紹了JavaScript實(shí)現(xiàn)千位分隔符的幾種常見方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-09-09
Bootstrap實(shí)現(xiàn)默認(rèn)導(dǎo)航欄效果
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)默認(rèn)導(dǎo)航欄效果，導(dǎo)航欄是一個很好的功能，是Bootstrap網(wǎng)站的一個突出特點(diǎn)，本文帶領(lǐng)大家學(xué)習(xí)實(shí)現(xiàn)Bootstrap導(dǎo)航欄,需要的朋友可以參考下2015-12-12
基于ajax實(shí)現(xiàn)文件上傳并顯示進(jìn)度條
這篇文章主要介紹了基于ajax實(shí)現(xiàn)文件上傳并顯示進(jìn)度條,需要的朋友可以參考下2015-08-08
純js實(shí)現(xiàn)html轉(zhuǎn)pdf的簡單實(shí)例(推薦)
下面小編就為大家?guī)硪黄僯s實(shí)現(xiàn)html轉(zhuǎn)pdf的簡單實(shí)例(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
盡管DOM帶來了動態(tài)修改文檔的能力，但對開發(fā)人員來說，這還不夠。IE4.0為所有的元素引入了兩個特性，以更方便的進(jìn)行文檔操作，這兩個特性是innerText和innerHTML。2009-05-05