autofocus 相关问题

HTML `autofocus` 仅适用于有限类别的元素吗?

我没有看到 MDN 上列出任何限制。 然而,尽管在此代码中将自动焦点放在第二个列表项上,但页面加载时的 document.activeElement 是 : 1... 我没有看到 MDN 中列出任何限制。 但是,尽管将 autofocus 放在此代码中的第二个列表项上,页面加载时的 document.activeElement 是 <body>: <ul> <li>1</li> <li id="two" tabindex="1" autofocus>2</li> <li>3</li> </ul> <button type="button" id="button1">First button</button> <button type="button" id="button2" autofocus>Second button</button> 相比之下,将 autofocus (仅)放在第二个按钮 (button2) 上确实会导致其成为页面加载时的活动元素。 那么,autofocus仅适用于某些元素吗? 是页面加载时焦点位于第二个列表元素上的唯一方法 document.getElementById("two").focus(); 问题更有可能是在加载事件触发后执行聚焦步骤。 相关规范位于 https://html.spec.whatwg.org/multipage/interaction.html#flush-autofocus-candidates。 由此我们可以得出,为了让 autofocus 属性在页面加载时执行某些操作,我们需要: 该文档与最顶层文档同源,即不在跨源 iframe 中,因此很难在 REPL 中显示... 该元素是可聚焦区域,否则将选择最接近的此类可聚焦区域。 如果我们假设您在自己的页面中运行此代码,那么您满足了这两个条件并且它应该可以工作。 现在,如果您确实在 load 事件中记录了 activeElement,您可能会在下一个 flush autofocus候选者之前,该候选者发生在事件循环的更新渲染步骤期间,因此与加载文档。为了确保在初始刷新后运行,您可以使用 requestAnimationFrame() 它将对回调进行排队,以便在该步骤之后触发一点。 至于为什么当只有<button>有该属性时你看到它起作用,我想这只是一个侥幸。

回答 1 投票 0

ReactJS 和自动对焦

我有一个带有 的反应引导模式。我想在 上设置自动对焦属性 以下工作正常,但在控制台中显示警告 我有一个带有 react-bootstrap 的 <input> 模态。我想在 <input> 上设置自动对焦属性 以下工作正常,但在控制台中显示警告 <input type="text" autofocus='true' /> Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`? 以下选项不起作用,因为它们在打开模式时不会聚焦输入: <input type="text" autoFocus='true' /> <input type="text" autoFocus={true} /> <input type="text" autoFocus /> 建议的自动对焦设置方式是什么?或者我应该如何使效果良好的示例的警告静音? 注意:这是react 16.8.6 如果您使用 React Hooks,请将 useCallback() 添加到您的组件,并将 ref={callback} 添加到表单控件: import React, { useCallback } from 'react' function InputComponent() { const autoFocus = useCallback(el => el ? el.focus() : null, []) return <input type="text" ref={autoFocus} /> } export default InputComponent 您也可以将 <input> 替换为 React Bootstrap FormControl。 Refs就是你想要的, constructor(props) { super(props); this.myRef = React.createRef(); } componentDidMount(){ this.myRef.current.focus(); } <input type="text" ref={this.myRef} /> 如果您正在使用反应钩子,您可以编写自己的简单自动聚焦钩子: import { useEffect, useState } from "react"; export const useAutoFocus = (inputId: string) => { const [initialized, setInitialized] = useState(false); useEffect(() => { if(!initialized) { document.getElementById("email").focus(); setInitialized(true); } }); }; 并且简单地使用例如 useAutoFocus("email") 以您的形式。 为什么我开始输入时会出现错误?但如果没有自动对焦或其替代方案,我的代码就可以了。

回答 4 投票 0

在 Ng Zorro 和 Angular 的抽屉中禁用自动对焦

我想禁用 Ng Zorro 抽屉中的自动对焦第一输入。我知道 Ng Zorro 模态有一个禁用自动对焦的属性。但抽屉没有。 我有一个非常糟糕的解决方案:我有 pu...

回答 1 投票 0

如何在 Flutter 中保持焦点在 TextField 上而不显示键盘?

我是 Flutter 新手。我想要的是将焦点放在 TextField 上,而不是显示键盘。可以吗?

回答 2 投票 0

WeScan 相机自动对焦或快速选择相机

我使用 WeScan git repo 在 Swift 中制作了一个成分扫描应用程序,因为我只想一次扫描一张图像,并在尝试使用本机库时发现了问题。 https://github.com/WeTransfer/W...

回答 1 投票 0

在 Ionic 7 中,如何将光标焦点设置在 IonInput 字段上?

我正在使用 Ionic 7 和 React 18。如何使表单上的特定输入在加载该组件时自动获得光标焦点?我认为“自动对焦”是...

回答 1 投票 0

在 Ng Zorro(Angular)抽屉中禁用自动对焦

我想禁用 Ng Zorro 抽屉中的自动对焦第一输入。我知道 Ng Zorro 模态有一个禁用自动对焦的属性。但抽屉没有。 我有一个非常糟糕的解决方案:我有 pu...

回答 1 投票 0

如何从Android设备获取LENS_FOCUS_DISTANCE

从android相机api2,我们可以设置LENS_FOCUS_DISTANCE(从0到10)。我的问题是如何获得 LENS_FOCUS_DISTANCE?比如自动对焦后,我想知道当前焦点

回答 2 投票 0

如何使用`alteditor`自动聚焦jquery中的第一个可见输入字段?

我正在尝试自动聚焦由 datatable-alteditor 触发的模态的每个第一个元素。为了更好地理解,这里是数据表示例。当我单击“添加”按钮时,我需要名称元素

回答 1 投票 0

React:自动聚焦模态内的输入字段

我使用Antd。我有由表单组成的模态窗口。当用户打开模式窗口时,我想关注输入字段。我如何在功能组件中做到这一点?我尝试这样做,但对我不起作用: 常量

回答 2 投票 0

“尽管 Android 在 Activity 开始时将焦点放在布局中的第一个文本字段”这一说法是否仍然有效?

我在处理输入法可见性部分找到了主题声明 我想尝试在活动开始时打开我的键盘。但是,我唯一的 EditText 并不专注于活动开始。我的躺...

回答 0 投票 0

android-jetpack compose->格式化文本字段以在每 4 个字符后显示空格并在空格后移动焦点

我正在尝试实施 InputTextField 以获取信用卡/借记卡号码,我的要求是每 4 位数字后需要空格,并且需要在添加空格后移动焦点。 InputTextField 应该打印成 ...

回答 0 投票 0

在 <h1> 渲染时重置焦点

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

回答 1 投票 0

Talkback Focus 始终转到应用栏中的后退按钮

在主页中,我有一个名为“选择语言”的按钮。单击该按钮后,它将导航到我们可以选择语言的新页面。 现在我想要实现的是当我导航时......

回答 0 投票 0

((Flutter)Textfield的自动对焦不会让导航器关闭键盘]]

[当我使用自动对焦时:在我的Textfield中,结合使用Navigator.push(context,SlideDownRoute(topPage:this.widget,bottomPage:Page2()));动画在哪里:键盘是...

回答 1 投票 0

如何在使用python opencv的3d重建中使用自动对焦

问题陈述我以前使用带固定镜头的Logitech网络摄像头进行3D重建。每次更改场景与相机之间的距离时,都需要手动手动调整镜头焦距。 (打开...

回答 1 投票 0

为什么模糊图像获得更好的拉普拉斯得分方差?

以下代码在大多数情况下会在一组时间内找到最佳聚焦图像,但是在某些图像中,该图像返回的值更高,使我的眼睛更加模糊。我正在使用...

回答 1 投票 1

[页面加载时自动聚焦的输入字段

好吧,我真的无法弄清楚。加载我的页面之一时,搜索字段将自动聚焦。这打破了页面的标签顺序。有跳过链接和其他链接...

回答 1 投票 0

我如何撤消点击以聚焦/测光?

在我的相机应用中,我正在考虑支持点击以进行对焦和测光。作为用户,我发现我的手指有时不小心触摸了屏幕,并且在那儿聚焦,所以我想...

回答 1 投票 1

EmberJS Octane将焦点放在元素上

我具有包含多个文本区域和一个添加另一个文本区域的按钮的组件。当用户单击按钮时,将添加一个新的文本区域。我希望焦点转移到这个新的文本区域。 ...

回答 1 投票 0

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