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

来源：互联网发布：淘宝客微信封号编辑：程序博客网时间：2024/05/16 14:50
<!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>
0 0