Question

我正在开发一个使用simple-keyboard JavaScript库的网络应用。

通过查看源代码，我可以看到该库通过在某些事件（例如keyup，mouseup，touchend）上执行一些同步代码（selectionStart），将其内部键盘缓冲区和插入符号位置与输入字段的内容同步。

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>

边缘浏览器插入符号在触摸设备上的位置

0 个答案: