我做了一個搜索框，大致編碼是這樣鼠標事件處理的元素

<table id="searchBox" style="border:1px solid #555;"> 
<tr> 
    <td> 
    <input type="text" style="border:none" id="myTextBox" onclick="makeActive();" /> 
    </td> 
    <td> 
    <select onclick="makeActive();"> 
    <option>Option 1</option> 
    <option>Option 2</option> 
    <option>Option 3</option> 
    </select> 
    </td> 
    <td> 
    <input type="submit" value="Submit" /> 
    </td> 
</tr> 
</table>

功能

function makeActive() { 
document.getElementById("searchBox").style.border="1px solid #ff0000"; 
} 
function makeUnactive() { 
document.getElementById("searchBox").style.border="1px solid #555"; 
}

我的要求： 正如代碼表示，當用戶單擊textbox或selectbox時，表格邊界更改顯示searchbox is Active現在，和我想，當搜索框表function makeUnactive()以外用戶點擊應該叫，我試圖內textbox所以腳本也被稱爲當我點擊使用onblur="makeUnactive();"selectbox或Submit Button這是錯誤的:(

編輯

其做工精細現在 check my answer below How I Did It

來源

2013-05-18 Abar Choudhary

在您的網站（個人資料），**你賣非法商品** ... – mate64

您應該使用onfocus屬性調用活躍function.To做出領域不活躍，不活躍調用函數onblur財產。

DEMO

做工精細：

HTML

<table id="searchBox" style="border:1px solid #555;"> 
<tr> 
<td> 
<input type="text" style="border:none" onclick="makeActive()" onblur="makeUnactive()"/> 
</td> 
<td> 
<select onclick="makeActive();" onblur="makeUnactive()"> 
<option>Option 1</option> 
<option>Option 2</option> 
<option>Option 3</option> 
</select> 
</td> 
<td> 
<input type="submit" value="Submit" /> 
</td> 
</tr> 
</table>

function makeActive() { 
document.getElementById("searchBox").style.border="1px solid red";} 
function makeUnactive() { 
document.getElementById("searchBox").style.border="1px solid yellow"; 
}

來源

2013-05-18 13:50:10 qwerty

嗯但使用這個問題也是一樣的:( –

@AbarChoudhary你在哪裏放你的功能？ – qwerty

哦實際上，我沒有使用Selectbox的實際，我做了我自己的選擇框使用div的和我做了一個箭頭圖像點擊我的選擇框可見 –

儘量只使用CSS

#id:focus { 
    outline: none; 
    border: 1px solid #f00; 
}

來源

2013-05-18 14:36:52 anomaaly

哦，我得到了答案：d
可如果i don't get Lost Focus from the Text Box所以我創建了運行時要麼Select Box or Submit Button is clicked所以現在我可以使用onblur到一個新的function來實現我的Text Box：d

function makeFocus() { 
myTextBox.focus(); 
}

感謝名單大家：*

來源

2013-05-18 23:27:48

鼠標事件處理的元素

編輯

回答

相關問題