Question

我想在触发模糊事件时让我的文本字段边框闪烁。我有动态文本字段，如下所示。我试过下面的东西。但那些代码没有用。

<!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>

当处于模糊事件触发器时，如何使我的文本字段闪烁？

Answer 1

setTimeout(borderchange2(elem1),500);相当于：

执行borderchange2(elem1)
然后致电setTimeout(undefined,500);

执行borderchange2(elem1)将对borderchange1执行相同的操作，依此类推。

borderchange1＆安培; borderchange2将被无限期地一个接一个地调用，而不会超时。

您需要向setTimeout提供一项功能：

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

Answer 2

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

＆＃13;

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

＆＃13;

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;
    }
}

＆＃13;

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

＆＃13;

Answer 3

以下所有代码对我有用，谢谢大家的回复。

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);
}

动态闪烁文本字段边框

3 个答案: