jQuery下使用window.prevFocus给前序聚焦元素赋值失效问题

问题根因 #

点击按钮时，按钮本身会优先获得页面焦点，触发你绑定的全局focusin事件，导致存储的window.prevFocus被覆盖为当前点击的按钮元素，按钮不属于可赋值的输入类元素，调用.val()方法自然无法生效。

可选用的解决方案 #

方案1：禁止按钮获取焦点（改造成本最低） #

给所有赋值类按钮添加tabindex="-1"属性，阻止按钮触发焦点事件，原有JS逻辑无需任何调整：

<button id="butSetVal0" tabindex="-1">设置值为0</button>

方案2：将按钮监听事件替换为mousedown #

mousedown事件的触发时机早于页面焦点转移，此时prevFocus仍为之前聚焦的输入元素，只需修改按钮绑定逻辑即可：

$("#butSetVal0").on({ 
    mousedown: function(e){
        // 阻止默认行为，避免触发后续焦点转移
        e.preventDefault();
        const newVal = 0;
        setNewValue(newVal);
    }
});

方案3：过滤按钮类元素的焦点存储 #

如果需要保留按钮的可聚焦特性，只需修改全局focusin监听逻辑，过滤不需要存储的按钮元素即可（可根据实际按钮的通用选择器调整判断条件）：

window.prevFocus = $();
// 捕获冒泡的focusin事件（focus本身不冒泡）
$(document).on('focusin', ':input', function () {
   // 新增判断：如果当前聚焦元素是赋值按钮，不更新prevFocus，示例用类名判断，可按需调整
   if($(this).hasClass('set-val-btn')) return;
   // 测试用：展示上一个聚焦元素的id
   $("#debug").html(prevFocus.attr("id") || '');
   // 存储当前聚焦的输入元素后续使用
   window.prevFocus = $(this);
});

优化建议 #

建议给setNewValue加非空判断，避免未聚焦过输入元素时调用报错：

function setNewValue(newVal){
    if(window.prevFocus.length) {
        prevFocus.val(newVal).trigger("input");
    }
}

内容的提问来源于stack exchange，提问作者Ludo Timp