<!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>
检查用户在文本框中是否是连续输入的状态
最新推荐文章于 2022-10-09 11:32:10 发布