脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实时监听input输入框值

如何利用js实时监听input输入框值的变化

 更新时间：2024年02月01日 14:40:11   作者：可乐星-  
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感,这篇文章主要给大家介绍了关于如何利用js实时监听input输入框值的变化,需要的朋友可以参考下

实习日记之通过调用common chemistry的api接口实现输入keyword查找cas号和mw。做了一个简单的html网页，用到了ajax技术。比较简单，适合刚入门的宝学习参考。代码如下：

<!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 数据的链接
            var request;
            if (window.XMLHttpRequest) {
                request = new XMLHttpRequest(); //发送 Ajax 请求，适用于 Chrome, mozilla 等浏览器 
            } else if (window.ActiveXObject) {
                request = new ActiveXObject("Microsoft.XMLHTTP"); // 发送 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 = '暂无数据';
                        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 数据的链接
            var request;
            if (window.XMLHttpRequest) {
                request = new XMLHttpRequest(); //发送 Ajax 请求，适用于 Chrome, mozilla 等浏览器 
            } else if (window.ActiveXObject) {
                request = new ActiveXObject("Microsoft.XMLHTTP"); // 发送 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()">点击加载</button>

</body>

</html>

过程中遇到的问题：当我清空keyword值后，上一次搜索的cas和mw依然存在。

方案一：js实时监听input输入框值的变化，需要用到input监听事件：

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

调用对应的js监听函数：

 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)，数据一直无法清空。后来我改成了空字符串if(event.target.value == '')就对了。

方案二：在点击加载按钮的时候，先将元素内容清空再进行ajax请求，直接在点击事件触发的方法里清空数据即可。

//点击事件 
function loadCAS() {
   document.getElementById("cas").innerText = '';
   document.getElementById("mw").innerText = '';
        ......
}

附jQuery用法：

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

总结 

到此这篇关于如何利用js实时监听input输入框值变化的文章就介绍到这了,更多相关js实时监听input输入框值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript中Array的常用方法举例详解

    JavaScript中Array的常用方法举例详解

    这篇文章主要介绍了JavaScript中Array常用方法的相关资料,JavaScript的Array对象提供多种方法,涵盖创建、增删、查找、遍历、转换、排序等操作,文中给出了详细的代码示例,需要的朋友可以参考下
    2025-06-06
  • JavaScript中CommonJS 与 ES Modules的区别

    JavaScript中CommonJS 与 ES Modules的区别

    本文主要介绍了JavaScript中CommonJS 与 ES Modules的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2026-03-03
  • JS跨域交互(jQuery+php)之jsonp使用心得

    JS跨域交互(jQuery+php)之jsonp使用心得

    JSON是一种基于文本的数据交换方式，或者叫做数据描述格式，这篇文章主要介绍了JS跨域交互(jQuery+php)之jsonp使用心得的相关资料，非常不错，具有参考借鉴价值，需要的朋友一起学习吧
    2016-07-07
  • js跨浏览器实现将字符串转化为xml对象的方法

    js跨浏览器实现将字符串转化为xml对象的方法

    将字符串转化为xml对象需要注意的是该死的ie多版本的问题，具体实现如下，感兴趣的朋友不妨参考下本文，希望对大家有所帮助
    2013-09-09
  • innerhtml用法 innertext用法 以及innerHTML与innertext的区别

    innerhtml用法 innertext用法 以及innerHTML与innertext的区别

    innerhtml用法 innertext用法 以及innerHTML与innertext的区别，看完这个大家以后在实际应用中，就可以选择合适的方法。尽可能的考虑到兼容性。
    2009-10-10
  • JavaScript实现千位分隔符几种常见方法

    JavaScript实现千位分隔符几种常见方法

    将普通的数字转换为带千位分隔符格式的数字字符串是一个非常常见的问题,这篇文章主要介绍了JavaScript实现千位分隔符的几种常见方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-09-09
  • Bootstrap实现默认导航栏效果

    Bootstrap实现默认导航栏效果

    这篇文章主要介绍了Bootstrap实现默认导航栏效果，导航栏是一个很好的功能，是Bootstrap网站的一个突出特点，本文带领大家学习实现Bootstrap导航栏,需要的朋友可以参考下
    2015-12-12
  • 基于ajax实现文件上传并显示进度条

    基于ajax实现文件上传并显示进度条

    这篇文章主要介绍了基于ajax实现文件上传并显示进度条,需要的朋友可以参考下
    2015-08-08
  • 纯js实现html转pdf的简单实例(推荐)

    纯js实现html转pdf的简单实例(推荐)

    下面小编就为大家带来一篇纯js实现html转pdf的简单实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • innerText和innerHTML 一些问题分析

    innerText和innerHTML 一些问题分析

    尽管DOM带来了动态修改文档的能力，但对开发人员来说，这还不够。IE4.0为所有的元素引入了两个特性，以更方便的进行文档操作，这两个特性是innerText和innerHTML。
    2009-05-05

最新评论