侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

解决onkeydown和onblur事件的冲突

2023-12-19 星期二 / 0 评论 / 0 点赞 / 23 阅读 / 2214 字

‍1.问题描述: 文本框里面 我有 onblur事件 和 onkeydown事件‍ <spanclass="setName">cpu</span><inputid="serverCPU"type="t

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

广告 广告

评论区