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 处于事件状态 现在，并且 我希望当用户在搜索框表外单击时 function makeUnactive() 应该被调用，我尝试在 onblur="makeUnactive();" 中使用 code>textbox 所以当我点击 selectbox 或 Submit Button 时脚本也会被调用，这是错误的:(

---

已编辑

它现在工作正常 检查下面我是怎么做到的答案

---

Answer 1

您应该使用 onfocus 属性调用 active 函数。要使字段处于非事件状态，请调用 onblur 属性中的 inactive 函数。

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>

JS

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