动态闪烁文本框边框

当模糊事件触发时，我想让文本字段边框闪烁。我有像下面这样的动态文本字段。我尝试了下面的东西。但这些代码不起作用。动态闪烁文本框边框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Onload Highlight</title> 

<script type="text/javascript"> 

function borderchange1(elem1) { 
    document.getElementById(elem1.id).style.border ="1px solid yellow"; 
    setTimeout(borderchange2(elem1),500); 
} 

function borderchange2(elem2) { 
    document.getElementById(elem2.id).style.border ="1px dotted yellow"; 
    setTimeout(borderchange1(elem2),500); 
} 
function run_it(element){ 
    borderchange1(element); 
    borderchange2(element); 
} 
</script> 

</head> 

<body> 
<input type="text" id="txt-0" onBlur="run_it(this)"><br> 
<input type="text" id="txt-1" onBlur="run_it(this)"><br> 
<input type="text" id="txt-2" onBlur="run_it(this)"><br> 
<input type="text" id="txt-3" onBlur="run_it(this)"> 
</body> 
</html>

如何让我的文本字段闪烁，当模糊事件触发？

来源

2014-10-08 user3894221

标记由于某种原因而被弃用。 – 2014-10-08 10:27:02

setTimeout(borderchange2(elem1),500);等同于：

执行borderchange2(elem1)
然后调用setTimeout(undefined,500);

执行borderchange2(elem1)会做同样的事情borderchange1等。

borderchange1 & borderchange2将被无限期地连续调用而没有任何超时。

您需要提供一个功能setTimeout：

setTimeout(function() { 
    borderchange2(elem1); 
}, 500);

来源

2014-10-08 10:13:42 manji

您可以使用on()方法附加动态生成的元素的事件，并闪烁它的CSS动画：

$(document).on("blur",":input",function() { 
 
    $(this).addClass('highlight'); 
 
}).on("focus",":input",function() { 
 
    $(this).removeClass('highlight'); 
 
})

input.highlight { 
 
    -webkit-animation: blink 1s linear 3; 
 
    -ms-animation: blink 1s linear 3 ; 
 
    -moz-animation: blink 1s linear 3; 
 
    animation: blink 1s linear 3; 
 
} 
 
@-webkit-keyframes blink { 
 
    from { 
 
     box-shadow:0 0 0px 0 red; 
 
    } 
 
    50% { 
 
     box-shadow:0 0 10px 0 red; 
 
    } 
 
    to { 
 
     box-shadow:0 0 0px 0 red; 
 
    } 
 
} 
 
@keyframes blink { 
 
    from { 
 
     box-shadow:0 0 5px 0 #000; 
 
    } 
 
    50% { 
 
     box-shadow:0 0 0px 0 #000; 
 
    } 
 
    to { 
 
     box-shadow:0 0 5px 0 #000; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" /><br/> 
 
<input type="text" />

来源

2014-10-08 10:19:30

您好所有以下代码工作给我，谢谢大家的回复。

function borderchange1(elem1) { 
    document.getElementById(elem1.id).style.border ="1px solid yellow"; 
    setTimeout(function() { 
     borderchange2(elem1); 
}, 500); 
} 

function borderchange2(elem2) { 
    document.getElementById(elem2.id).style.border ="1px dotted yellow"; 
    setTimeout(function() { 
     borderchange1(elem2); 
}, 1000); 
} 
function run_it(element){ 
    borderchange1(element); 
    borderchange2(element); 
}

来源

2014-10-08 12:19:03 user3894221

动态闪烁文本框边框

回答

相关问题