onblur 相关问题

当元素失去焦点时会触发blur事件。

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

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

react-native textinput onblur onfocus react-native-paper

回答 1 投票 0

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

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

javascript reactjs onblur lockdown

回答 1 投票 0

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

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

javascript reactjs onblur lockdown

回答 1 投票 0

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

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

javascript react-hooks onblur focusout freshjs

回答 1 投票 0

键盘可访问的 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 属性交互。我希望我的解决方案有帮助:-)

javascript reactjs accessibility onblur onfocus

回答 1 投票 0

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

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

angular onblur

回答 1 投票 0

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

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

javascript reactjs onblur

回答 4 投票 0

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

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

javascript input focus onblur

回答 1 投票 0

onBlur 重置反应选择中的值

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

reactjs redux onblur react-select

回答 1 投票 0

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

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

javascript html textbox onblur

回答 5 投票 0

tinyMCE 模糊事件

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

javascript jquery tinymce onblur rte

回答 7 投票 0

将选择保留在文本区域中

我可以防止“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)

javascript selection onblur

回答 4 投票 0

GWT 窗口模糊

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

gwt onblur onfocus

回答 2 投票 0

VTextField 上未触发 Blur 事件

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

vuejs2 event-handling vuetify.js blur onblur

回答 1 投票 0

JavaScript事件处理程序 race

如果我有一个带有注册了onblur事件处理程序的文本字段和一个带有注册了onmouseup事件处理程序的按钮，这两个函数哪一个会更快运行，为什么？我的问题是...