强迫HtmlButton失去焦点
强迫HtmlButton失去焦点
提问于 2021-08-04 04:27:12
我有一个VueJS应用程序，其中一个HTML按钮在屏幕上，当它被点击，是适当的有“焦点”，但我想选择删除焦点后，短暂的延迟。
if (props.defocus === "true" || props.defocus === true) {
// de-focus the button after 400ms
setTimeout(() => {
if (el.value !== null) {
el.value.blur();
}
}, 400);
}现在，我确实提到了这是一个VueJS项目，但实际上这只是DOM和JS/TS。我使用setTimeout等待400 to，并且能够调用按钮上的blur()函数。然而，这似乎没有起到任何作用。现在我想这可能是两件事：
- I已经根据DOM成功地移除了按钮元素上的焦点，但不知怎么的，VueJS并没有对它做出反应(也就是，焦点样式仍然保持)
- 对
focus()的调用被忽略(没有错误)
是否有方法检查开发人员工具中的焦点状态？在我想要的行为上，我有什么遗漏了吗？
对于组中的视觉意识而言，上面的组件是当我单击一个按钮并选择它时，焦点状态由一个紫色的轮廓表示的地方。我希望在用户点击它之后，它就消失了。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-08-05 01:13:49
尝试使用指向按钮的指针无效，但我发现只需查询focus元素就可以得到一个处理程序，在那里我可以调用blur并让它工作：
if (props.defocus === "true" || props.defocus === true) {
// de-focus the button after delay
setTimeout(() => {
// QUERY FOR FOCUS ELEMENT
const e2 = document.querySelector(":focus");
if (e2 && (e2 as HTMLButtonElement).blur) {
(e2 as HTMLButtonElement).blur();
}
}, Number(props.defocusDelay));
}这是没有问题的，除非其他人有更好的解决方案，否则我会将其标记为正确的解决方案。
Stack Overflow用户
发布于 2021-08-05 03:54:54
制作指令文件Defocus.ts；
export default {
name: 'defocus',
priority: 700,
bind(el: any, binding: any) {
el._onClick = () => {
setTimeout(()=> {
el.blur();
}, 400)
}
el.addEventListener('click', el._onClick);
},
unbind(el: any) {
el.removeEventListener('click', el._onClick);
}
};然后导入并使用
import Defocus from "@/shared/directives/Defocus";
@Component ({
directives: {
Defocus
}
})然后在模板中：
<button v-defocus>Click Me</button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68645394
复制相关文章
相似问题
腾讯云开发者
