我有一个文本框和一个 Jquery UI 对话框。当用户在文本框中输入完毕并按 Enter 后,我想显示该对话框。为了实现这一点,我使用以下代码:
$(document).ready(function () {
var helpDial = $('#helpDialog');
var input = $('#helpSearch');
helpDial.dialog({
width: 800,
autoOpen: false,
modal: true,
title: "Templates",
position: [165, 158]
});
input.focusin(function () {
helpDial.dialog('close');
}).focusout(function () {
helpDial.dialog('open');
}).on('keypress', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
input.focusout();
return false;
}
});
});
<input id="helpSearch" />
<div id="helpDialog"></div>
问题是,当我按 Enter 时,focusout
被调用两次,一次来自 input.focusout()
,第二次是在 之后
。这会导致创建两个背景叠加层,当我关闭对话框时,一个叠加层仍然可见。focusout
事件处理程序中的 helpDial.dialog('open')
我做错了什么?有没有更好的方法来处理这种情况——“在文本字段中按下回车键会打开一个 jQuery 对话框”。谢谢。
最佳答案
防止事件触发的唯一方法是取消事件处理程序的绑定(bind)。或者,根据情况,根据事件触发时可用的信息采取不同的操作。
只要元素失去焦点,就会触发 focusout
事件。在这种情况下,每次用户单击文本框时,都会触发 focusin
事件。一旦光标离开文本框(打开对话框时就会发生这种情况),就会触发 focusout
事件。
您代码的问题在于,您强制调用了 focusout
事件,然后当您打开对话框时,自然会调用 focusout
事件。因此,按如下方式更改代码:
$(document).ready(function () {
var helpDial = $('#helpDialog');
var input = $('#helpSearch');
helpDial.dialog({
width: 800,
autoOpen: false,
modal: true,
title: "Templates",
position: [165, 158]
});
input.on('focusin', function () {
input.on("focusout", textboxFocusOut);
}).on('keypress', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
textboxFocusOut();
}
});
function textboxFocusOut() {
input.off("focusout", textboxFocusOut);
helpDial.dialog('open');
}
});
此代码的作用是将函数绑定(bind)到 focusin
处理程序内的 focusout
。如果用户离开文本框,将调用 focusout
事件处理程序,该处理程序会立即取消绑定(bind) focusout
事件(以防止多次绑定(bind)该函数)。如果用户按下 Enter 键,则会手动调用该函数,这会在打开对话框之前删除 focusout
事件处理程序,以防止在打开对话框时自动触发 focusout
事件。对话框打开。
关于jquery - 对焦被触发两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11713872/