動態閃爍文本框邊框

當模糊事件觸發時，我想讓文本字段邊框閃爍。我有像下面這樣的動態文本字段。我嘗試了下面的東西。但這些代碼不起作用。動態閃爍文本框邊框

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

動態閃爍文本框邊框

回答

相關問題