被修改

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，而我希望当用户点击搜索框表格外{应该调用{1}} ，我尝试在function makeUnactive()中使用onblur="makeUnactive();"，因此当我点击textbox或selectbox时，也会调用该脚本:(

<小时/>

被修改

现在工作正常Submit Button

Answer 1

您应该使用onfocus属性调用活动函数。要使字段处于非活动状态，请在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>

<强> JS

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

Answer 2

尝试使用CSS

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

Answer 3

哦，我得到了答案：D
可以通过i don't get Lost Focus from the Text Box来实现，因此我创建了一个新的function，该Select Box or Submit Button is clicked在onblur时运行，所以现在我可以Text Box使用function makeFocus() { myTextBox.focus(); }：D

{{1}}

Thanx所有人：*

元素的鼠标事件处理

被修改

3 个答案: