检查用户在文本框中是否是连续输入的状态

最新推荐文章于 2023-03-05 18:55:50 发布

暗石绿

最新推荐文章于 2023-03-05 18:55:50 发布

阅读量1.4k

点赞数 3

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/xrascal/article/details/48289921

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>检查用户在文本框中是否是连续输入的状态</title>
  <style type="text/css">
h3 {font-size:14px;color:#333333;font-weight:bold;}
        body,div,input,ul,li,p {font-size:12px;color:#333333;}
        div,ul,li,p {line-height:25px;}
        li {list-style-type:none;}
    </style>
 </head>


 <body>
 <h3>检查用户在文本框中是否是连续输入的状态</h3>
 <p>
需求：像百度百科的提问一样，用户在文本框中输入文字的时候，实时的从服务端获取标签数据，并显示到页面上。<br />
我们需要避免频繁的调用服务端的获取标签接口，需要检测用户是否为连续输入，只有在非连续输入的时候，才会去调用服务端的获取标签接口。
 </p>
 <p>
方案：使用 javascript 的window.setTimeout方法，延时调用服务端的接口，在延时的这一段时间内，如果用户有输入，则使用javascript的 window.clearTimeout 方法，取消上一次的调用。
 </p>
  <ul>
    <li>源文：<textarea id="txtSrc" rows="5" cols="80">请输入文字，1秒内的输入为连续输入。</textarea>
        </li>
    <li>调试：<textarea id="txtInfo" rows="15" cols="80"></textarea></li>    
    </ul>


<script type="text/javascript">


    var timerId = 0; // 全局变量用于标识是否延时执行keyup事件
// 检查用户输入
// 原理：window.setTimeout 是延迟执行的，只要在 window.setTimeout 执行之前，把此执行取消（window.clearTimeout）掉就可以了。
    function checkUserType() {
if (timerId) {
clearTimeout(timerId); // 如果 timerId 是存在，就清除此 timer。
timerId = 0;
         }


        //延时1000ms执行请求事件，如果感觉时间长了，就用合适的时间
        //只要有输入则不执行keyup事件
        timerId = setTimeout(function(){
// 这里面就是调用的请求，我这里做了一个模拟。
// TODO: ajax method.
            document.getElementById("txtInfo").value = document.getElementById("txtInfo").value + "\ntimerId=" + timerId + "，当前时间=" + new Date().getTime();
          }, 1000);
    }


(function() {
// 给输入框 txtSrc 添加 keyup 事件。
document.getElementById("txtSrc").onkeyup = function(e) {
checkUserType();
};
}) ();
   
</script>
 </body>
</html>

暗石绿

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
检查用户在文本框中是否是连续输入的状态

需求：像百度百科的提问一样，用户在文本框中输入文字的时候，实时的从服务端获取标签数据，并显示到页面上。我们需要避免频繁的调用服务端的获取标签接口，需要检测用户是否为连续输入，只有在非连续输入的时候，才会去调用服务端的获取标签接口。方案：使用 javascript 的window.setTimeout方法，延时调用服务端的接口，在延时的这一段时间内，如果用户有输入，则使用javascript的 window.clearTimeout 方法，取消上一次的调用。
复制链接

扫一扫

专栏目录