<html>
<head>
    <script>
    function loaded() {
        setTimeout(() => window.webkit.messageHandlers.testHandler.postMessage("loaded"), 0);
    }

    function textFocused() {
        setTimeout(() => window.webkit.messageHandlers.testHandler.postMessage("text-focused"), 0);
    }

    function textInput() {
        setTimeout(() => window.webkit.messageHandlers.testHandler.postMessage("text-input"), 0);
    }

    function passwordFocused() {
        setTimeout(() => window.webkit.messageHandlers.testHandler.postMessage("password-focused"), 0);
    }

    function passwordInput() {
        setTimeout(() => window.webkit.messageHandlers.testHandler.postMessage("password-input"), 0);
    }
    </script>

    <style>
    input {
        width: 100%;
        height: 50%;
        font-size: 100px;
    }
    body { margin: 0; }
    </style>
</head>

<body onload=loaded() onmousedown=mousedown(event)>
    <input id="text" type="text" onfocus=textFocused() oninput=textInput()></input>
    <input id="password" type="password" onfocus=passwordFocused() oninput=passwordInput()></input>
</body>
</html>