iOS Webview 中的消息粘贴是什么事件？

Question

我有一个网站，用户需要验证通过短信发送的代码。该代码由 6 个密码组成，输入如下所示：

当用户输入验证码时，光标自动跳转到下一个输入框。这工作得很好。

当用户使用移动设备或我的 PWA 并请求代码时，Safari 会给出建议：“从消息中粘贴 [代码]”。同样在这种情况下，经过身份验证的代码会自动正确使用 6 个输入。

问题：我正在使用 PWABuilder.com 将我的 PWA 制作成原生 iOS 应用程序。当用户请求代码时，Safari 确实会建议从消息中粘贴代码。但 WebView 仅使用一个输入，它不会将字符串分散到所有 6 个输入中。

这是使用 Safari 的建议“从消息粘贴”时的当前结果。短信中的代码将粘贴到一个输入中。

预期结果：

请注意，只有在 Webview/PWAbuilder 中将我的应用程序用作本机 iOS 时才会出现此问题。在移动端、网站上……总能达到预期的结果。

我已经尝试捕获粘贴事件并将输入的文本传播到输入上。这也适用于本机 WebView，但“从消息粘贴”似乎不使用粘贴事件。

$(".number-input").bind("paste", function(e) {
    e.preventDefault();
    let text = e.originalEvent.clipboardData.getData('Text').trim();

    $(".number-input").each(function(i) {
        if (text.length < i + 1) {
            return false;
        }
        
        $(this).val(text.charAt(i));
        $(this).removeClass("untouched");
    });
});

如何解决这个问题？基本上我需要知道本机 webview 在使用“从消息中粘贴代码”功能时触发的事件。

Answer 1

问题是我使用了事件

onkeyup

。解决方案是同时使用

oninput

。

$(".number-input").first().on("input", function() {
    $(".number-input").first().unbind("input");
    
    let val = $(this).val();
    if (val.length == 6) {
        $(".number-input").each(function(i) {
            $(this).focus();
            $(this).val(val.charAt(i));
            $(this).removeClass("untouched");
        });

        validate_form();
    }
});