点击按钮,文本框如何不失去焦点

最新推荐文章于 2023-02-10 16:30:11 发布

转载最新推荐文章于 2023-02-10 16:30:11 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3237686/blog/1796661

文章标签：

#javascript #python #swift #ViewUI

本文介绍如何通过JavaScript阻止点击按钮时导致文本输入框失去焦点的现象。具体做法是在按钮的mousedown事件中调用event.preventDefault()来取消默认行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

给按钮设置 mousedown 事件，并在其中 event.preventDefault() 就可以了

// html
<input type="text" autofocus="autofocus">
<button>点击我文本输入框不会失去焦点</button>

// javascript
var btn = document.querySelector('button')
btn.onmousedown = function(event) {event.preventDefault()}

要点击按钮，触发按钮的 click 事件，但又不想触发 input 的 blur 事件。这里面的问题就在于，当我们点击按钮的时候，文本框失焦，这是浏览器的默认事件。当你点击按钮的时候，会触发按钮的 mousedown 事件，mousedown 事件的默认行为是使除了你点击的对象之外的有焦点的对象失去焦点。所以只要在 mousedown 事件中阻止默认事件发生就可以了！

转载于:https://my.oschina.net/u/3237686/blog/1796661