我做了一个搜索框,大致编码是这样
<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
时脚本也会被调用,这是错误的:(
已编辑
它现在工作正常检查下面我是怎么做到的答案
最佳答案
您应该使用 onfocus
属性调用 active 函数。要使字段处于非事件状态,请调用 onblur
属性中的 inactive 函数。
工作正常:
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";
}
关于javascript - 元素的鼠标事件处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16624921/