动态闪烁的文本字段边框
动态闪烁的文本字段边框
提问于 2014-10-08 17:54:15
当on blur事件被触发时，我想让我的文本字段边框闪烁。我有如下所示的动态文本字段。我尝试了下面这样的方法。但这些代码不起作用。
<!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>当模糊事件触发时，如何使我的文本字段闪烁？
回答 3
Stack Overflow用户
发布于 2014-10-08 18:13:42
setTimeout(borderchange2(elem1),500);相当于：
执行borderchange2(elem1)
- then call
setTimeout(undefined,500);
的
执行borderchange2(elem1)将对borderchange1执行相同的操作，依此类推。
borderchange1& borderchange2将被无限期地一个接一个地调用，没有任何超时。
您需要为setTimeout提供一个函数
setTimeout(function() {
borderchange2(elem1);
}, 500);Stack Overflow用户
发布于 2014-10-08 18:19:30
您可以使用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" />
Stack Overflow用户
发布于 2014-10-08 20:19:03
大家好，下面的代码对我很有用，谢谢你们的回复。
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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26254044
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号