onblur 相关问题

文本输入上的Vue3事件@keydown.esc未触发

我有一个包含各种事件的文本字段。所有事件都有效，但 @keydown.esc 无效。 我想区分@blur 和@keydown.esc。逃避应该总是做一些事情，@blur 只做一些事情......

除非单击特定元素，否则会触发模糊事件

我有三个搜索类别（参见第一张图片）。用户选择一个，我会在类别空间中显示与该主题相对应的搜索输入（参见第二张图片）。我自动...

React 本机自定义自动完成 onBlur 在 onPress 之前触发

我有一个带有列表项组件的 TextInput 组件，该组件在其下方显示搜索建议列表，类似于自动完成。问题是当我单击 li 中的建议之一时...

如何在 React 中将焦点设置在 div 上，以便通过 onBlur 触发效果？

我正在使用 React 开发一个非常基本的笔记应用程序。纯粹是前端问题。 在侧边栏上，我有一个所有当前笔记的列表，用户可以使用它们在它们之间进行交换。每个注释

当页面/浏览器失去焦点时暂停setInterval

我在客户的主页上制作了一个简单的幻灯片，使用 setInterval 来计时轮换。 为了防止浏览器在页面未聚焦时搞乱 setInterval（另一个选项卡...

如何让点击触发绝对元素的“模糊”和“焦点”事件？

我试图像每个普通元素一样基于点击来触发绝对定位元素上的焦点和模糊事件，因此当下拉菜单失去焦点时，它会自行折叠，但是，它...

如何使用react-native-paper更改TextInput样式并通过onblur关闭键盘

我使用react-native纸张，我需要帮助...我想知道如何拒绝键盘以及如何在onblur处于活动状态时停用OnFocus 从 'react-nati... 导入 { View, StyleSheet }

某些笔记本电脑设备在窗口全屏显示时不监听模糊事件[关闭]

我写了一段代码来检测用户是否要离开浏览器窗口。 （就像锁定浏览器一样） 首先，我全屏打开页面。 document.documentElement.requestFullscreen(...

某些笔记本电脑设备在窗口全屏显示时不会触发 Javascript 模糊事件函数

我写了一段代码来检测用户是否要离开浏览器窗口。 （就像锁定浏览器一样） window.addEventListener('blur', onBlur); 我成功尝试过的大多数笔记本电脑设备

发生 focusOut 事件时如何停用某个功能？

目标 我想要两个搜索栏，每个搜索栏都可以： 键入时显示建议 使用箭头键选择项目 每个项目都可以定制 因为最后一颗子弹我不想用<

键盘可访问的 React 组件可在悬停和焦点时安装？

在 React 应用程序中，我有一个 组件网格。每个 渲染多个 组件。 由于我无法控制的限制，Button 的效率很低 在 React 应用程序中，我有一个由 <Card /> 组件组成的网格。每个 <Card /> 渲染多个 <Button /> 组件。 由于我无法控制的限制，Button是一个低效的组件。渲染成本很高，而且我们需要渲染数百个<Card />组件，因此它成为性能问题。 考虑到这一点，我只想在用户主动与 <Button /> 交互时安装/渲染 <Card />： 当用户将鼠标悬停在 <Card /> 上时，安装 <Button /> 当用户通过键盘导航到 <Card /> 时，安装并聚焦 <Button />。 允许键盘用户在 <Card /> 组件之间完全向前/向后循环 悬停部分相当简单，我的实现如下所示。 我的键盘部分遇到问题。由于 <Button /> 尚未安装，用户键盘如何导航到它？ 我尝试过的CodeSandbox链接 这大部分都有效，除了两个重要的方式： 当 <Button /> 被插入时，第一个 <Card/> 应该立即获得焦点（不需要按第二次 Tab 键） 反向键盘导航（即shift+tab）不允许任何<Button>获得焦点。它应该聚焦于“最后一个”按钮，并允许用户导航所有按钮，然后转到上一个 <Card> 问题：我必须对下面的代码进行哪些修改才能支持以上两点？ import { useState, Fragment, useEffect, useRef, MutableRefObject } from "react"; import Button from "./Button"; export default function Card() { const [isHovered, setIsHovered] = useState<boolean>(false); const [showButtons, setShowButtons] = useState<boolean>(false); const containerRef: MutableRefObject<HTMLDivElement | null> = useRef(null); useEffect(() => { setShowButtons(isHovered); }, [isHovered]); return ( <div onMouseOver={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onFocus={(event) => { event.persist(); setIsHovered(true); }} onBlur={(event) => { event.persist(); window.requestAnimationFrame(() => { if (containerRef.current) { setIsHovered( containerRef.current.contains(document.activeElement) === true ); } }); }} tabIndex={0} > <div ref={containerRef}> <h2>Card</h2> {showButtons && ( <Fragment> <Button>Expensive Button One</Button> <Button>Expensive Button Two</Button> </Fragment> )} </div> </div> ); } 您可以使用简单的 CSS（opacity 属性）和焦点状态更改来达到所需的结果。 请注意，使非交互式卡片容器组件与 tabIndex={0} 交互是一种反模式。 //styles.css .invisible-button { opacity:0; } //Button.tsx import React, { useState, FC } from "react"; export const Button: FC<{ children: React.ReactNode }> = ({ children, }) => { const [hasBeenFocused, setHasBeenFocused] = useState(false); const handleFocus = () => setHasBeenFocused(true); const handleBlur = () => setHasBeenFocused(false); return ( <button className={hasBeenFocused ? "" : "invisible-button"} onFocus={handleFocus} onBlur={handleBlur} onMouseEnter={handleFocus} onMouseLeave={handleBlur} > {children} </button> ); }; export default Button; 看看完整的沙箱： https://codesandbox.io/p/sandbox/intelligent-matsumoto-frc9kk?file=%2Fsrc%2FApp.js%3A14%2C1 如果您希望仅让按钮获得焦点，则无需使卡片组件与 tabIndex 属性交互。 我希望我的解决方案有帮助:-)

角度模糊事件阻止按钮的点击事件

我有一个包含输入的嵌套子组件。输入端出现模糊事件 在祖先组件中，我有另一个带有单击的元素

使用 onBlur 事件上的值更新 React 输入文本字段

我有以下输入字段。在模糊时，该函数调用服务来更新服务器的输入值，完成后，它会更新输入字段。 我怎样才能做到...

即使点击输入之外的按钮，如何保持输入焦点

假设我有一个输入 和一个按钮 一些文字 我想要那个onblur，它失去了...

onBlur 重置反应选择中的值

我的反应选择有问题。当我在可搜索输入中输入一些文本并单击外部时，我的文本消失了。 我尝试了 onBlur={() => input.onBlur({value: input.value})} 并且它工作正常...

使用 Javascript onBlur 事件时 html 文件中出现错误

我正在阅读Javascript教程，我正在使用带有框的javascript函数制作一个html文件，事实是警报没有显示文本字段中的内容，我做错了什么？， ...

tinyMCE 模糊事件

你好 当用户在tinyMCE文本区域中完成书写并单击外部某处（onBlur）时，我想做一些事情。 到目前为止我已经尝试过： $('#id_topic_text_parent').live('模糊',function(){ 阿尔...

将选择保留在文本区域中

我可以防止“onblur”事件中选择丢失吗？ 我可以防止“onblur”事件中选择丢失吗？ <!DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en"> <head> <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8"> <script type = "text/javascript"> window.onload = function () { var textarea = document.getElementsByTagName ("textarea")[0]; textarea.onblur = function () { alert ("Should keep selection"); return false; } } </script> <title>Select me!</title> </head> <body> <textarea>Select me!</textarea> </body> </html> 我认为这不是一个好主意。用户手里拿着鼠标可以点击页面上的任意位置。如果你让他/她回到文本区域，它将不遵循网络可访问性的原则。 也许你的意思是你想记住选择，即使用户专注于另一个元素，这样如果他们返回到文本区域，仍然会选择相同的文本。是这样吗？ 如果是这样，我认为最简单的方法是将文本区域放在同一域的 iframe 中。每个文档都维护自己的选择上下文。当然，您需要从文本区域读取数据，并可能将其复制到表单中的隐藏字段，因为您不能在另一个文档中的表单中包含字段，因此您需要进行某种代理. textarea.onblur = function () { alert("Should keep selection"); textarea.focus(); return false; } 我已经为你准备了这个js类： class SelectionHolder{ constructor(element_id){ this.element = document.getElementById(element_id); this.selection_start = null; this.selection_end = null; } setListener(object){ this.element.onfocus = ()=>{object.reselect();} this.element.onblur = ()=>{object.update();} } update(){ this.selection_start = this.element.selectionStart; this.selection_end = this.element.selectionEnd; } reselect(){ this.element.setSelectionRange( this.selsection_start, this.selection_end, "forward"); } } 然后将其用于您的元素 Let my_holder = SelectionHolder("my-text-area-id"); my_holder.setListener(my_holder)

GWT 窗口模糊

GWT 应用程序如何确定浏览器窗口或选项卡是否失去焦点，即变得不活动？我需要这个来将基于画布的应用程序切换到暂停状态，但只有当整个浏览器都停止运行时...

VTextField 上未触发 Blur 事件

我创建了一个日期/时间选择器组件，它使用两个 VTextField 输入小时和分钟值。每个字段上有三个事件。其中两个事件，焦点和输入确实调用了它们的响应...