如何防止Android长按上的元素失去焦点？答案

【问题标题】：How to prevent focus loss from an element on an Android long press?如何防止Android长按上的元素失去焦点？
【发布时间】：2023-09-06 00:31:01
【问题描述】：

我正在开发一个主要基于 Web 的 Android 应用程序，并且在处理 Web 浏览器上的 Android 长按时遇到了问题。问题可以归结为下面代码和JS bin链接给出的简单示例：

class App extends React.Component {
  constructor(){
    super();
  }

  render(){
    return (
      <div>
        <input/> 
        <canvas
          onMouseDown={(e) => e.preventDefault()}
          onTouchStart={(e) => e.preventDefault()}
          onContextMenu={(e) => e.preventDefault()}
          width="300px"
          height="300px"
          style={{background: 'red'}}
         />
       </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Example

问题是在长按画布时试图防止输入焦点丢失。要查看问题，您必须在 android 移动设备上查看 JS Bin 示例。按下输入元素使其聚焦，然后长按画布元素。即使在上下文菜单处理程序上调用了 preventDefault() 方法，焦点也会从输入中丢失。 touch start 和 mouse down 处理程序都可以使用 preventDefault() 方法正确防止焦点丢失，但上下文菜单不能。

目前我能想到两种解决方案。一种是将焦点放回上下文菜单处理程序中的输入元素，并防止执行任何模糊/焦点处理程序。另一种解决方案是完全禁用 Web 视图上的长按。与实际解决方案相比，两者都感觉像是变通办法/黑客，因为根本问题是输入元素的焦点丢失。我不知道焦点变化是发生在 Android 端还是 Web 端，这就是我发布这个问题的原因。

到目前为止，我已经尝试过使用 CSS 解决方案和 JS 事件侦听器来停止事件，但它们不起作用。我还没有尝试过 Android / Java 端的解决方案，因为我主要在 Web 端工作，并且想在继续之前用尽所有选项。

如果有人可以通过提供的 JS Bin 获得适合我的解决方案，那将是理想的，但我也会接受任何能引导我获得更多信息以找到潜在解决方案的答案。

【问题讨论】：

标签： javascript android html reactjs

【解决方案1】：

我的问题的解决方案是在 Android / Java 方面。我不得不重写 webView 的 onLongClick() 方法以避免失去焦点。以下是解决方案的代码：

// if the result type of the long click is null or not editable text - return true (ignore the long click)
// otherwise return false (show context menu)
_webView.setOnLongClickListener(new View.OnLongClickListener() {
  @Override
  public boolean onLongClick(View v) {

    WebView.HitTestResult result = _webView.getHitTestResult();

    return result == null || result.getType() != WebView.HitTestResult.EDIT_TEXT_TYPE;
  }
});

【讨论】：