What event is paste from message in iOS Webview?

Question

I have a website where a user needs to authenticate a code sent by text message. The code exists out of 6 ciphers and the input looks like this:

When the user enters the authentication code, the cursor automatically jumps to the next input-box. This works perfectly fine.

When the user is on mobile or on my PWA and he requests a code, Safari gives the suggestion: "Paste [code] from messages". Also in this case, the authenticated code automatically uses the 6 inputs correctly.

The problem: I am using PWABuilder.com to make my PWA into a native iOS-app. When the user requests a code, Safari does give the suggestion to paste the code from messages. But the WebView only uses one input, it does not spread the string over all the 6 inputs.

This is the current result when using Safari's suggestion "Paste from messages". The code from the text message is pasted in one input.

Expected result:

Note that this issue is only when using my app as native iOS in a Webview/PWAbuilder. On mobile, website,... the expected result is always achieved.

I already tried to catch the paste-event and spread the inputted text over the inputs. This also works in a native WebView, but "pasting from message" does not seem to use the paste-event.

$(".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");
    });
});

How to solve this? Basically I'd need to know the event the native webview triggers when it uses the function "Paste code from message".

Answer 1

The problem was that I used the event onkeyup. The solution was to use oninput as well.

$(".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();
    }
});