解决onkeydown和onblur事件的冲突

1.问题描述:

文本框里面 我有 onblur事件 和 onkeydown事件

<span class="setName">cpu</span>
<input id="serverCPU" type="text" onblur="onServerCpu(this)" onkeydown="if(event.keyCode==13){onServerCpu(this)}"/>
				
<span class="setName">内存</span>
<input id="serverMemory" type="text" onblur="onServerMemory(this)" onkeydown="if(event.keyCode==13){onServerMemory(this)}"/>

两者都是为了 提交 本来的意图是:鼠标离开可以提交,按回车按钮也可以提交,可是 我在回车后 执行的是onkeydown事件 但是 按完回车然后点击关掉弹出的对话框,相应的焦点就失去同时又执行了 onblur事件
结果就是弹出一样的对话框两次 我想让他回车后 不执行 onblur事件 或者只执行一次onblur事件该怎么解决

function blurStd(this){
    alert("hello");
}

function onServerMemory(this){
    alert("hello");
}

2.解决办法:在onkeydown里面不调用blurstd函数和onServerMemory函数,而是在onkeydown里面将焦点移出,最好是移到下一个输入框上。这样即实现移动焦点,移动焦点之后又会触发onblur事件,才调用提交一举两得

代码如下:

<span class="setName">cpu</span>
<input id="serverCPU" type="text" onblur="onServerCpu(this)" 
onkeydown="if(event.keyCode==13){var next=document.getElementById('serverMemory');next.focus();}"/>
<span class="setName">内存</span>
<input id="serverMemory" type="text" 
onblur="onServerMemory(this)" 
onkeydown="if(event.keyCode==13){var next=document.getElementById('serverCPU');next.focus();}"/>

注意这个next.focus()这个focus()函数是jquery库里面的函数,要引用jquery库。

你可能感兴趣的:(解决onkeydown和onblur事件的冲突)