onfocus 相关问题

onfocus是HTML和JavaScript中的一个事件,在引用的对象获得焦点时触发。此标记只能与主要语言标记一起使用,并且仅适用于onfocus事件对于要解决的问题的核心问题。

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

回答 1 投票 0

Android TV 项目关于焦点缩放

使用下面的函数,我试图扩大焦点项目的高度和宽度。我面临的问题是高度仅向底部扩展,而顶部似乎是固定的。我...

回答 1 投票 0

作为 prop 传递的函数在 React Native 中不起作用

我的代码遇到问题,所以基本上我有一个名为 StoreScreen 的函数 我将我创建的搜索栏称为 SearchBar,并且从 StoreScreen 中我需要访问...的 onFocus

回答 1 投票 0

如何防止首次合成期间 TextField 上的初始 onFocus 触发

有什么方法可以在构图的初始布局期间防止 onFocus 触发吗? .onFocusChanged { // 初始传递仅使用“false”值触发不必要的 onFocus 回调 ...

回答 2 投票 0

如何使用 JavaScript 以编程方式设置输入:焦点样式

我正在用 JS 构建一个 UI 库,它可以在不依赖任何 CSS 样式表的情况下创建 UI 组件,并通过代码进行风格化。到目前为止,除了设置不同的控件样式外,一切都非常简单

回答 6 投票 0

在“onfocus”事件中检查 CapsLock 是否打开

我的以下代码用于检查 Capslock 是否打开,在“onkeypress”事件上工作正常。 但我想要它用于“onfocus”事件。 我尝试将控件的“onkeypress”替换为“onfocus”,但是...

回答 4 投票 0

在 React Native 中显示/隐藏 onFocus 和 onBlur 组件

我正在开发一个小应用程序,其中有一个包含药物“名称、缩略图和图像地址”的文件,称为medications.js 文件。该文件和相关图像存储在本地文件夹中。 我...

回答 1 投票 0

GWT 窗口模糊

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

回答 2 投票 0

在 <h1> 渲染时重置焦点

当一个新的页面标题呈现时,我想重置该页面上的焦点,这样点击 将导致浏览器转到此主页面标题之后的可聚焦/可标记元素。

回答 1 投票 0

能否使用JS或jQuery为一个DIV写onFocuslostFocus处理程序?

我有一个div,当用户点击div的时候,应该调用一个函数。而当用户点击其他东西时(除了这个div之外的任何东西),另一个函数应该被调用。所以基本上我...

回答 4 投票 8

当我点击下拉列表时,我想清除一个文本框。

这是我的下拉列表的代码,它的工作原理是什么?

回答 2 投票 0

在DOM事件上向函数发送参数

我正在尝试向javascript事件的函数调用发送参数。在下拉菜单中,接收焦点文本的位置会根据传递给函数调用的参数而有所不同。无法...

回答 1 投票 0

使用jQuery根据所关注的锚点将类添加到父div

我有一个锚点列表,我希望他们根据当前关注的锚点将唯一的类添加到特定的div ID。我可以将其用于锚点悬停,但是我很难过...

回答 1 投票 0

div上的角度模糊,如果在下拉菜单中则不调用

我有一个输入,当我输入内容时,我会显示一个具有不同选项的div(取决于我在输入中输入的内容)。我想在模糊输入时隐藏div。

回答 1 投票 0

我如何检查输入框是否以jquery为焦点?

是否可以检查用户是否选择了输入框?我的html是:您能做这样的事情吗? if($(“#name”)。is(“:focus”)){// ...

回答 1 投票 0

我如何摆脱这个错误? TypeError:无法将属性'onfocus'设置为null

因此,对于模式库,对于form字段,我具有此角度分量。我设置了所有必要的部件以使其显示和运行。但是,我添加了一些功能来引发...

回答 1 投票 0

jquery ajax表单验证跳转到错误UI问题

当错误文本放置在输入字段上方时,如何将错误文本降低到视图中?我想将错误文本降低到视图中,或通过...

回答 1 投票 0

如何在单击iframe(JavaScript)时防止窗口失去焦点

我有一个Web应用程序,当用户离开活动窗口时,需要登录。我一直在尝试对该窗口使用blur事件,它运行良好,但是不幸的是,当我单击到...

回答 1 投票 0

如何每1小时刷新页面中的数据以及标签在Angular中获得焦点时

我能够使用interval和Subscription在Angular中每小时实现一次自动刷新。这是代码:ngOnInit(){const source = interval(3600000); //每隔1个小时刷新一次。...

回答 1 投票 0

如何在按钮列表上聚焦/模糊事件响应本机

我正在尝试以原生方式模拟焦点/模糊事件,但没有成功。我有两个组件,主页和按钮。在家里,我呈现了一个按钮列表(category1,category2和category3)。这是我的代码:...

回答 1 投票 1

© www.soinside.com 2019 - 2024. All rights reserved.