ecology8字段边框闪烁提醒

用户点击提交时,若填写的表单数据不合法,给不合法的字段边框一个闪烁的动画效果:

 1 /**
 2  * 绑定字段提醒事件 
 3  * 更新日期:20190820
 4  * @param {*} $obj 字段jQuery对象
 5  * @param {*} marked 闪烁提醒后是否留痕,默认false:不留痕
 6  * @param {*} originalBorder 原始边框样式字符串,默认"0px none rgb(0, 0, 0)"
 7  */
 8 function bindFocusEvent($obj,weight,marked,originalBorder) {
 9     //边框闪烁提醒
10     var oldBorder = $obj.css("border");
11     var blingBorder = weight +"px solid rgb(255, 0, 0)";//红色
12     var original=true;
13     if(originalBorder==undefined){//设置originalBorder默认值
14         originalBorder="0px none rgb(0, 0, 0)";
15     }
16     if(oldBorder!=originalBorder){
17         oldBorder=originalBorder;
18         $obj.css("border", oldBorder);
19         original=false;
20     }
21     var tempBorder;
22     var times = 10;
23     var timer = setInterval(function () {
24         if (times <= 0) {//停止闪烁
25             clearInterval(timer);
26             $obj.focus();
27             return;
28         }
29         tempBorder = marked ? (times % 2 == 0 ? oldBorder : blingBorder) : (times % 2 == 0 ? blingBorder : oldBorder);
30         $obj.css("border", tempBorder);
31         times--;
32     }, 150);
33     if (original&&marked) {//绑定边框还原事件        
34         $obj.one("mouseover", function () {//鼠标经过,还原边框
35             //$obj.one("blur",function(){//失去焦点,还原边框
36             $obj.css("border", oldBorder);
37         });
38     }
39 }

 

posted @ 2019-11-06 14:29  灌汤非  阅读(542)  评论(0)    收藏  举报