如何强制移动端ServiceNow页面指定输入框获取焦点？

核心原因 #

移动端WebView（包括ServiceNow Agent App内嵌的WebView）出于安全与用户体验限制，不允许非用户交互触发的自动聚焦，这就是window.load事件中直接调用focus()无效的根本原因。

可行方案 #

方案1：全局监听扫描按键（推荐，无需焦点） #

多数硬件条码扫描器按下扫描键时，会自动将条码内容以字符流形式输入，并在末尾附加Enter键（keyCode 13）。直接监听document级别的按键事件，无需依赖输入框焦点即可捕获扫描内容：

let scanBuffer = '';

// 监听全局按键事件
document.addEventListener('keydown', function(e) {
    // 扫描完成后通常会触发Enter键
    if (e.keyCode === 13) {
        if (scanBuffer.length > 0) {
            // 处理扫描结果
            handleScan(scanBuffer);
            scanBuffer = '';
        }
    } else {
        // 收集扫描的有效字符（排除控制键）
        if (e.key && e.key.length === 1) {
            scanBuffer += e.key;
        }
    }
});

// 自定义扫描结果处理逻辑
function handleScan(barcode) {
    // 将结果填入输入框
    $j('#input_asset_tag').val(barcode);
    // 执行后续业务操作（比如提交到ServiceNow）
    // submitBarcode(barcode);
}

方案2：结合ServiceNow生命周期事件触发聚焦 #

如果必须让输入框获得焦点，改用ServiceNow框架提供的页面就绪钩子（而非window.load），并通过模拟用户交互绕过限制：

// Portal Widget使用widgetLoaded事件，UI Page可使用DOMContentLoaded
$j(document).on('widgetLoaded', function() {
    // 延迟执行，等待WebView完全初始化
    setTimeout(function() {
        // 模拟触摸交互（触发移动端允许的用户交互上下文）
        $j('#input_asset_tag').trigger('touchstart').trigger('touchend');
        // 执行聚焦
        $j('#input_asset_tag').focus();
        console.log('当前焦点状态:', document.hasFocus());
    }, 500);
});

方案3：调用ServiceNow移动端API请求焦点 #

ServiceNow Agent App提供了移动端专属API，可尝试通过原生桥接请求WebView获取焦点：

if (typeof sn_mobile !== 'undefined') {
    // 请求App赋予WebView焦点
    sn_mobile.app.requestFocus(function() {
        $j('#input_asset_tag').focus();
    });
}

关键注意事项 #

• 放弃依赖window.load事件：ServiceNow移动端页面的加载生命周期与普通Web页面不同，框架自有就绪事件更可靠。
• 优先选择全局按键监听：无需用户交互即可直接捕获扫描内容，完全规避焦点问题。

内容的提问来源于stack exchange，提问作者Ramón Cordova