javascript中缺少邏輯

與輸入相鄰的按鈕。該按鈕在默認情況下處於隱藏狀態，並且在輸入獲得焦點時可見，並且如果輸入失去焦點，則會再次隱藏該按鈕。

我寫了一個代碼來實現這一點。但問題是按鈕的事件沒有被觸發，因爲它在輸入失去焦點時被隱藏。

我沒有得到任何想法實現這一點。可以有人幫助我。

下面是代碼

<html> 
<head> 
<style> 
    .icon{ 
    visibility:hidden; 
    } 
</style> 
</head> 
<body> 

    <input type="text" onFocus="onOver('f4_1')" onBlur="onOut('f4_1')"/> 
    <input type="button" class="icon" value="?" id="f4_1" onClick="alert('hi..')"/> 

<script> 
    function onOver(f4Id){ 
     document.getElementById(f4Id).style.visibility = "visible"; 
    } 

    function onOut(f4Id){ 
     document.getElementById(f4Id).style.visibility="hidden"; 
    } 
</script> 
</body> 

</html>

注：使用純JavaScript來實現。不要使用任何jQuery。

謝謝。

來源

2013-01-23 Rama Rao M

聽起來像功課。 –

抱歉...輸入錯誤..問題編輯爲 –

事件處理非常重要，理解它們何時被觸發是最重要的 onmousedown事件將覆蓋文本框的onBlur效果，這是必需的。

檢查工作Example Here

<input type="text" onFocus="onOver('f4_1')" onBlur="onOut('f4_1')"/> 
    <input type="button" class="icon" value="?" id="f4_1" onmousedown="alert('M Kicked')"/> 

<html> 
<head> 
<style> 
    .icon{ 
    visibility:hidden; 
    } 
</style> 
</head> 
<body> 

    <input type="text" onFocus="onOver('f4_1')" onBlur="onOut('f4_1')"/> 
    <input type="button" class="icon" value="?" id="f4_1" onmousedown="alert('M Kicked')"/> 

<script> 
    function onOver(f4Id){ 
     document.getElementById(f4Id).style.visibility = "visible"; 
    } 

    function onOut(f4Id){ 
     document.getElementById(f4Id).style.visibility="hidden"; 
    } 
</script> 
</body> 

</html>

來源

2013-01-23 09:32:25

事實上，這些事件的順序因瀏覽器而異。如果我沒有記錯的話，IE瀏覽器會觸發按鈕，如果你點擊它，而Firefox不會。

無論如何，問題可以通過添加一個小的延遲來解決。更改onOut功能：

function onOut(f41d) { 
    setTimeout(function(){document.getElementById(f41d).style.visibllity="hidden";},25); 
}

現在該按鈕將隱藏幾乎瞬間。它對人的眼睛應該是不明顯的，但是計算機可以區分它們並讓你點擊按鈕。

來源

2013-01-23 09:04:12

我在IE9中檢查了它。這樣，如果輸入丟失了foucs，那麼按鈕不會被隱藏....你能否在你的系統中檢查一次...... –

javascript中缺少邏輯

回答

相關問題