解決onkeydown和onblur事件的衝突

1.問題描述:html

文本框裏面 我有 onblur事件 和 onkeydown事件
jquery

<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事件,才調用提交一箭雙鵰this

代碼以下:spa

<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庫。

code

相關文章
相關標籤/搜索