Позиционирование каретки браузера Edge на сенсорном устройстве - PullRequest
Новая
       51

Позиционирование каретки браузера Edge на сенсорном устройстве

0 голосов
/ 22 февраля 2019

Я работаю над веб-приложением, в котором используется простая клавиатура библиотека javascript.

Просматривая исходный код, я вижу, что библиотека синхронизирует свой внутренний буфер клавиатуры иПозиционируйте курсор с полями ввода, выполнив некоторый код синхронизации (selectionStart) для определенных событий: keyup, mouseup, touchend.

https://github.com/hodgef/simple-keyboard/blob/master/src/lib/components/Keyboard.js#L574

На сенсорном устройстве и только в браузере Edge,с этим есть проблема.Проблема в том, что Edge, по-видимому, не позволяет размещать каретку, щелкая где-то в пределах текста, но позволяет пользователю перетаскивать курсор каретки .

Это«перетаскивание», похоже, не запускает событие touchend , поэтому курсор ввода и курсор виртуальной клавиатуры не синхронизируются.

Кто-нибудь знает, могу ли я предотвратить такое поведение перетаскивания в Edge (и разрешить позиционированиевнутри текста простым прикосновением) или есть какое-то особое событие Edge для перетаскивания курсора?

Пример: 

/**
 * This seems to work in any browser **Except** on a touch device in Edge browser
 */
document.addEventListener("keyup", caretEventHandler);
document.addEventListener("mouseup", caretEventHandler);
document.addEventListener("touchend", caretEventHandler);

function caretEventHandler(event) {
  let targetTagName;
  if (event.target.tagName) {
    targetTagName = event.target.tagName.toLowerCase();
  }

  if (targetTagName === "textarea" || targetTagName === "input") {
    document.querySelector(".selectionStart span").innerHTML =
      event.target.selectionStart;
  }
}
body {
  font-family: sans-serif;
  margin: 0;
}

input {
  width: 100%;
  height: 50px;
  text-align: left;
  padding-left: 10px;
}

.selectionStart {
  padding: 10px;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link href="src/styles.css" rel="stylesheet" />
  </head>

  <body>
    <input
      class="input"
      value="Click anywhere in this string to get selectionStart"
    />
    <div class="selectionStart">selectionStart: <span></span></div>
    <script src="src/index.js"></script>
  </body>
</html>
...