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

Posted 2023-05-07

【中文标题】react js中的window.onblur事件没有在android webview中被调用

【英文标题】：window.onblur event in react js not getting invoked in android webview

【发布时间】：2021-11-27 06:19:26

【问题描述】：

下面给出的代码在 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 的解决方案。

【问题讨论】：

你的意思是如果你离开android App，它不会向WebView发送模糊事件？这与使用 Web 浏览器不同，但您可以轻松检测到试图离开应用程序的用户并相应地继续操作。这是关于注销用户吗？请提供有关实际问题的更多信息。

【参考方案1】：

推荐链接：Official Document

您可以通过将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."
    />
  )

【参考方案2】：

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

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