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 }
欢迎交流!