window.onblur 事件在反应 js 中没有被调用 android webview

Question

下面给出的代码在 PC、笔记本电脑、Tab 和移动浏览器中完美运行。 此代码检测用户是否正在打开另一个选项卡或其他文档或失去当前浏览器 window 的焦点。但是如果我们使用此代码使用 android web-view 构建一个 web 应用程序，那么这根本不起作用。

import React,{useEffect} from 'react';

function App() {
useEffect(() =>
{
const onBlurCallback = () => onBlur();
window.addEventListener('blur', onBlurCallback);
return () =>
{
window.removeEventListener('blur', onBlurCallback);
};
}, []);

return (
<div className="App">

</div>
);
}

function onBlur()
{
alert('hello');
}

export default App;

请提出一个也适用于 android 网络视图的解决方案。

Answer 1

您不需要像 React 中那样使用addEventListner进行模糊处理。 您可以这样尝试：

<input type="text" onBlur={()=> //... your function here} />

Answer 2

推荐链接：官方文档

您可以通过将onBlur function 添加为<input />的属性来使用它。

function Example() {
  return (
    <input
      onBlur={(e) => {
        console.log('Triggered because this input lost focus');
      }}
      placeholder="onBlur is triggered when you click this input and then you click outside of it."
    />
  )
}