WKWebview не работает правильно с предложением OTP - PullRequest
Новая
       16

WKWebview не работает правильно с предложением OTP

0 голосов
/ 24 января 2019

У нас есть веб-страница с 6 полями ввода, помеченными autocomplete="one-time-code". Мы используем событие keyup для автоматической фокусировки на следующее поле ввода. Он отлично работает в сафари, где, когда пользователь нажимает на поле с предложением OTP, каждое поле ввода получает одну цифру из OTP. Но в WKWebView он устанавливает все цифры OTP в первом поле ввода. При добавлении журналов во всех прослушивателях событий создается впечатление, что в WKWebView страница не запускает keyup или focus или любое другое событие, когда пользователь пытается заполнить OTP с помощью поля предложения. Ниже приведен соответствующий код, который был взят из здесь : 

    function getCodeBoxElement(index) {
        return document.getElementById('codeBox' + index);
      }
      function onKeyUpEvent(index, event) {
        const eventCode = event.which || event.keyCode;
        if (getCodeBoxElement(index).value.length === 1) {
          if (index !== 6) {
            getCodeBoxElement(index+ 1).focus();
          } else {
            getCodeBoxElement(index).blur();
            // Submit code
            console.log('submit code ');
          }
        }
        if (eventCode === 8 && index !== 1) {
          getCodeBoxElement(index - 1).focus();
        }
      }
      function onFocusEvent(index) {
        for (item = 1; item < index; item++) {
          const currentElement = getCodeBoxElement(item);
          if (!currentElement.value) {
              currentElement.focus();
              break;
          }
        }
      }

<body>
        <input id="codeBox1" autocomplete="one-time-code" type="number" maxlength="1" onkeyup="onKeyUpEvent(1, event)" onfocus="onFocusEvent(1)"/>
        <input id="codeBox2" autocomplete="one-time-code" type="number" maxlength="1" onkeyup="onKeyUpEvent(2, event)" onfocus="onFocusEvent(2)"/>
        <input id="codeBox3" autocomplete="one-time-code" type="number" maxlength="1" onkeyup="onKeyUpEvent(3, event)" onfocus="onFocusEvent(3)"/>
        <input id="codeBox4" autocomplete="one-time-code" type="number" maxlength="1" onkeyup="onKeyUpEvent(4, event)" onfocus="onFocusEvent(4)"/>
        <input id="codeBox5" autocomplete="one-time-code" type="number" maxlength="1" onkeyup="onKeyUpEvent(5, event)" onfocus="onFocusEvent(5)"/>
        <input id="codeBox6" autocomplete="one-time-code" type="number" maxlength="1" onkeyup="onKeyUpEvent(6, event)" onfocus="onFocusEvent(6)"/>
  </body>

Я также пытался внедрить скрипт в WKWebView, чтобы прослушать некоторые события, но безуспешно в случае автоматической OTP. 

let contentController = WKUserContentController()
    let scriptSource = """
        document.getElementsByName("codeBox1")[0].addEventListener("keyup", function(){ window.webkit.messageHandlers.iosListener.postMessage('key up 1'); });
        document.getElementsByName("codeBox1")[0].addEventListener("change", function(){ window.webkit.messageHandlers.iosListener.postMessage(this.value); });
        """
    let script = WKUserScript(source: scriptSource, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
                contentController.addUserScript(script)
    wkWebView.configuration.userContentController.addUserScript(script)
    wkWebView.configuration.userContentController.add(self, name: "iosListener")


public func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        print("message: \(message.body)")

    }

Есть ли способ обработать его в WKWebView так, как он обрабатывается в Safari? Еще не пробовали это на SFSafariViewController, и это в любом случае не вариант для нас.

...