时间戳

首页 > 解决方案 > react js中的window.onblur事件没有在android webview中被调用

javascript - react js中的window.onblur事件没有在android webview中被调用

问题描述

下面给出的代码在 PC、笔记本电脑、标签和移动浏览器中完美运行。此代码检测用户是否正在打开另一个选项卡或其他文档或失去当前浏览器窗口的焦点。但是，如果我们使用 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 web-view 的解决方案。

标签： javascriptandroidreactjswebview

解决方案

推荐链接：官方文档

您可以onBlur通过将其添加为<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."
    />
  )
}

推荐阅读