拦截 tab keydown 事件后更改焦点答案

【问题标题】：Change focus following intercept of tab keydown event拦截 tab keydown 事件后更改焦点
【发布时间】：2017-03-16 18:53:14
【问题描述】：

我有一个表面上看起来很简单的问题，但是我在解决方案上遇到了一些问题。我正在使用带有 jQuery1.8.3 和 jQuery-confirm 的 asp.net 3.5。

在这一点上我要说 javascript 和 jQuery 对我来说是相当新的，我对使用它们并不是特别有信心。

我正在拦截文本框上的 keydown 事件，如果按下了 tab 键，我会显示一个 jQuery 确认对话框。在对话框的操作之后，我希望移动到另一个文本框。看起来很简单，这是我的代码。

$$("m_DiscountTextbox").on('keydown', function (e) {
var key = e.which || e.keyCode;
if (key == 9) {
    PromptForDiscount();
    document.getElementById($$("m_MarkupTextbox").attr("id")).focus();   
    }
});

function PromptForDiscount() {
$.confirm({
    title: 'Apply global discount',
    content: 'Discount will be applied to all line items. Click Confirm to continue, or Cancel to exit.',
    boxWidth: '30%',
    theme: 'material',
    buttons: {
        formSubmit: {
            text: 'Confirm',
            keys: 'enter',
            btnClass: 'btn-blue',
            action: function () {
                ApplyDiscount();
            }
        },
        cancel: function () {
        }
    },
    useBootstrap: false
});
return false;

$$ 调用了一个选择器函数，它允许我使用 asp.net 控件的 id，就像它们在 .net 破坏它们之前一样。

使用 chrome 开发人员工具，我可以看到选择器一直在工作，甚至使用它们来检查目标文本框上的文本。只是焦点改变不起作用。

最初，焦点转到目标，一旦确认对话框，它就会恢复到调用文本框。如有任何帮助，我们将不胜感激。

提前致谢。

进一步的想法：

我现在想知道当它的操作完成并且在撤消对下一个文本框的焦点设置的过程中，它是否是对话框将控制权传回给原始调用者。我还没有证据支持这一点，但它看起来可能是调查的候选对象。

我还设置了一个基本的 jsfiddle 来演示这个问题： https://jsfiddle.net/8uap36fp/17/

【问题讨论】：

尝试在该模式的确认/取消回调中聚焦（）
感谢 Rohith，我已经尝试过了，但没有成功。我可以看到焦点移到目标框，然后又回到源框。我想知道这是否与事件模型有关
我想在模式被关闭时关注下一个输入，而不是在它可见时。
用户在点击确认后将标签移出字段并执行计算，焦点应移至下一个字段。我应该补充一点，我可以看到焦点在来自模态的灯箱效果后面移动，这就是我知道背景中发生的事情的方式。
哦，好吧，..stackoverflow.com/questions/8380759/…

标签： javascript jquery

【解决方案1】：

在这上面花了很多时间，我问了对话框开发者的问题。

事实证明，这是此对话框的一个限制，将在未来的版本中解决。基本上要解决此问题，您可以将对话框的 lastFocused 属性设置为不存在的元素。

工作的 jsfiddle 是 here

感谢 Rohith 昨天的所有支持。

jsFiddle 的代码

function PromptForDiscount() {
$.confirm({
    title: 'Test confirm',
    content: 'Lets hope this stays open.',
    boxWidth: '30%',
    buttons: {
        formSubmit: {
            text: 'Confirm',
            keys: 'enter',
            btnClass: 'btn-blue',
            action: function () {
                this._lastFocused = $('.thisElementDoesntExists');
                $("#arrivehere").focus();
            }
        },
        cancel: function () {
        }
    },
    useBootstrap: false
});
return false;
};

【讨论】：