太复杂了,再优雅一点,简化一点儿
时间: 2024-12-23 15:25:08 浏览: 5
理解你的需求,让我们将焦点自动聚焦到弹出框的简洁版本简化一下。你可以创建一个名为 `autoFocusModal` 的轻量级辅助函数,接受一个参数 `modalElement`,它是模态对话框的引用。这样,示例如下:
```javascript
function autoFocusModal(modalElement) {
if (modalElement && modalElement.querySelector) { // 确保modal存在并且有querySelector能力
const firstInteractiveElement = modalElement.querySelector('input, button, textarea, [tabindex]:not([tabindex="-1"])'); // 寻找第一项可交互元素,默认包括常见输入组件和tabindex属性非负的元素
if (firstInteractiveElement) {
firstInteractiveElement.focus(); // 将焦点设置到该元素上
} else {
console.warn("No interactive elements found within the modal.");
}
} else {
console.error("Unable to autofocus on the modal. Check if it's properly initialized.");
}
}
// 使用时只需传入模态对话框的DOM节点
autoFocusModal(document.getElementById('yourModal'));
```
这个版本假设模态对话框内最常见的可交互元素如输入框、按钮和有tabindex的元素。如果找不到交互元素,会发出警告。
阅读全文