javascript - 元素的鼠标事件处理

Question

我做了一个搜索框，大致编码是这样的

<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()应该调用，我尝试在其中使用onblur="makeUnactive();"，textbox因此脚本也被调用时我点击selectbox或者Submit Button哪个是错误的:(

---

已编辑

它现在工作正常check my answer below How I Did It

---

Answer 1

哦 我
得到i don't get Lost Focus from the Text Box了答案function_ _Select Box or Submit Button is clickedonblurText Box

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

谢谢大家：*

Answer 2

尝试只使用 CSS

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

Answer 3

您应该使用onfocus属性调用活动函数。要使字段处于非活动状态，请在onblur属性中调用非活动函数。

演示

工作正常：

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>

JS

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