三种方式实现input的keyup延时事件

最新推荐文章于 2024-03-19 21:35:25 发布

qq_34616856

最新推荐文章于 2024-03-19 21:35:25 发布

阅读量8.6k

点赞数 2

文章标签： it

从事IT两年了，第一次写技术文章，之所以一直不敢写，因为越做这行越感觉自己菜（此处容我做一个悲伤的表情...）

今天做一个keyup的延时事件，对看清楚了，是keyup，不是男性延时！

网上搜了的方法实现有些困难，后来找大神同事帮忙想了几个办法出，得以解决。

一、网上找到的方法，当然代码是经过简化的（W3School在线测试代码）原文在此：http://blog.csdn.net/qq_30152271/article/details/52536064

<!DOCTYPE html>
<html>
<head>
     <script src="/jquery/jquery-1.11.1.min.js">
     </script>
     <script>
        //全局变量
	var last;
	//键盘弹起事件说明：若用户1s内没有其他输入，则弹出输入数字
	function keyup(event){
 	     last = event.timeStamp;
	     //得到输入的值
 	     var s = $("#test").val();
  	     setTimeout(function(){
                 //如果停止输入1s内没其他keyup事件发生，则弹窗提示
    		 if(last==event.timeStamp){
			alert(s);
    	         }
            },1000);
       }
     </script>
     </head>
     <body>
     <input id="test" onKeyUp="keyup(event)">
     </body>
</html>

总结：上面这个功能经测验，原网页是可以实现的，但是，我用的是easyUI，这个框架对控件的封装挺多，

使用上面代码时两个时间戳始终相同，于是不管我键盘按得多块，按几次，弹几次....

二、用keyup事件调用定时器setTimeout（）;

控件代码：

<input class="easyui-numberbox" style="width: 80px; margin-bottom: 0px" data-options="required:true,value:0,precision:0,events:{keyup:showDosage}">

js代码：

		//初始化条件
		var number = 0;
		//锁
		var run = false;
		//设置全局变量保存输入数组
		var kabiaoThesReadNumber ;
		function showDosage(event){
			//第二次读数
 			kabiaoThesReadNumber = $(this).val();//$("#kabiao_thesReadNumber").numberbox('getValue');
			if(!run){
				time();
			}
			number = 0;
		}
		 function time(){
			 run = true;
			 //定时器
			 setTimeout(function(){
				 if(number==1000){
					 alert("填入读数："+kabiaoThesReadNumber );
					 run = false;
					 return;
				 }
				 number=number+1000;
				 time();
			 }, 1000)
		 }

总结：这个方法对ezsyUI框架是可以实现的，但过程稍显复杂，容易出错，不太推荐使用

三、简单明朗的方法，利用clearTimeout（x）清除定时器

这个是在百度上搜到的答案，具体过程如下

控件代码：

<input class="easyui-numberbox" style="width: 80px; margin-bottom: 0px" data-options="required:true,value:0,precision:0,events:{keyup:showDosage}">

js代码：

 	 //全局变量，存储定时器
	 var t;
	 function showDosage(event){
		//输入数字
		var theReadNumber = $(this).val();
		//取消定时器选择回车和删除事件（此方法按回车和删除键也会触发，所以此处需要判断，当然不同情况有不同判断，这里就不一一举例了）
		if(event.keyCode != 13 && event.keyCode != 8){
			//清除定时器
			clearTimeout(t);
			t = setTimeout(function(){
				alert("当前用户理论用气量为："+(theReadNumber-lastReadNumber )+"方");
			},1000);
		}	
	}

总结：第三种发发简单明朗，值得推荐

注：可能是我写法上有问题，此处esayUI不能用$("#").val()的方式得到完整的值，所以用$(this).val();

qq_34616856

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
三种方式实现input的keyup延时事件

从事IT两年了，第一次写技术文章，之所以一直不敢写，因为越做这行越感觉自己菜（此处容我做一个悲伤的表情...）今天做一个keyup的延时事件，对看清楚了，是keyup，不是男性延时！网上搜了的方法实现有些困难，后来找大神同事帮忙想了几个办法出，得以解决。一、网上找到的方法，当然代码是经过简化的（W3School在线测试代码）原文在此：http://blog.csdn.net/qq_30
复制链接

扫一扫