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>有该属性时你看到它起作用，我想这只是一个侥幸。

javascript html autofocus

回答 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") 以您的形式。为什么我开始输入时会出现错误？但如果没有自动对焦或其替代方案，我的代码就可以了。

javascript reactjs bootstrap-modal react-bootstrap autofocus

回答 4 投票 0

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

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

angular drawer autofocus ng-zorro-antd

回答 1 投票 0

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

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

flutter textfield autofocus

回答 2 投票 0

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

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