Question

我正在用HTML编写一个简单的计算器。的JavaScript。似乎将HTMLElement.focus()与触摸输入结合使用会导致Google Chrome弹出恼人的菜单。该菜单与此页面上显示的Touch Based Text Editing in Chrome OS相同（尽管我在Windows 10上进行测试）。在Chrome的设置中禁用“基于触摸的文字编辑”似乎禁用了菜单，但这通常不是一个可行的解决方案。

我在MDN上使用的代码类似于HTMLTextAreaElement - Insert HTML Tags Example。以下是一些可以弹出菜单的示例代码：

function insertText(startText, endText) {
  var inputElement = document.getElementById("ii");

  var startPos = inputElement.selectionStart;
  var endPos = inputElement.selectionEnd;
  var oldText = inputElement.value;

  var beforeText = oldText.substring(0, startPos)
  var highlightText = oldText.substring(startPos, endPos);
  var afterText = oldText.substring(endPos);

  // Enclose highlighted text with startText and endText.
  inputElement.value = beforeText + startText + highlightText + endText + afterText;

  // Translate highlight position.
  inputElement.setSelectionRange(startPos + startText.length, endPos + startText.length);

  // Put the text caret back into the input element
  inputElement.focus();
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Example!</title>
</head>

<body>
  <input id="ii" type="text" />
  <button id="bb" onclick="insertText('start:', ':end')">Text</button>
  <button id="b1" onclick="insertText('1', '')">1</button>
  <button id="b2" onclick="insertText('2', '')">2</button>
</body>

</html>

我需要调用inputElement.focus()，以便在输入文本框中显示插入符号。奇怪的是，问题只发生在焦点丢失后第二次触发inputElement.focus（）。即：第一次按下按钮不会触发菜单。第一次按下任何按钮后会触发菜单。按下页面（因此焦点不在按钮或输入文本表格上）会重置行为（因此按下按钮不会触发它，但按下另一个按钮会执行此操作）。很奇怪。

这只在使用触摸时发生（鼠标和键盘似乎没有触发行为）。事实上，当使用stackoverflow.com的评论编辑器触摸时，Chrome的菜单会弹出！它在MSIE，Edge或Firefox中运行良好。

我已尝试捕获onselect，onfocus和oncontextmenu事件。我尝试过调用event.preventDefault()，event.stopPropagation()并返回false。我尝试了一些CSS样式无济于事。我不知道如何禁用这种烦人的行为。我不是要禁用右键单击上下文菜单。只是自动菜单行为。任何帮助表示赞赏！

如何通过Javascript停用Chrome的“基于触摸的文字编辑”菜单？

0 个答案: