问题

我们先来看如下的代码：

<body><button id="button">点击</button><div class="container"></div>
</body>

const buttonElement = document.querySelector("#button");
const containerElement = document.querySelector(".container");
buttonElement.addEventListener("mousedown", () => {const inputElement = document.createElement("input");containerElement.appendChild(inputElement);inputElement.focus();
});

从上面的代码中，我们可以看出，代码的主要目的是在button按钮触发mousedown事件的时候，动态生成一个input标签，添加到页面中，并且input标签需要获取到焦点。

但是事实上并没有达到我们的预期，input标签并没有能够获取得到焦点

原因分析

首先我第一时间想到的就是，是不是有其他元素在inputElement.focus()这行代码执行之后，获取到了焦点，导致input标签失焦了呢？而且页面跟我有交互的就只有button按钮了。

所以，很有可能是因为button按钮得到了焦点，导致input标签失去了焦点

于是，我给button按钮添加了一个focus事件来验证我的猜想：

const buttonElement = document.querySelector("#button");
const containerElement = document.querySelector(".container");buttonElement.addEventListener("focus", () => {console.log("focus");
});buttonElement.addEventListener("mousedown", () => {const inputElement = document.createElement("input");containerElement.appendChild(inputElement);inputElement.focus();console.log("mousedown");
});

最终输出的结果是：mousedown -> focus

所以input标签获取不到焦点的原因就是：用户点击button按钮会使button按钮得到焦点，并且发生的时机是在mousedown事件之后，导致input标签无法得到焦点

解决方案

方案一：等待button按钮获取得到焦点之后在让input标签获取焦点

buttonElement.addEventListener("mousedown", () => {// ...setTimeout(() => {inputElement.focus();}, 0);
});

可以采用定时器延迟input标签获取焦点的时机

方案二：阻止input标签获取焦点的默认事件

buttonElement.addEventListener("mousedown", (event) => {event.preventDefault();// ...inputElement.focus();
});

event.preventDefault()可以阻止button按钮的focus事件发生，也就是不会让按钮得到焦点

方案三：使用click事件

buttonElement.addEventListener("focus", () => {console.log("focus");
});
buttonElement.addEventListener("mousedown", () => {console.log("mousedown");
});
buttonElement.addEventListener("click", () => {console.log("click");
});

上面代码的执行结果为：mousedown -> focus -> click

click事件是发生在focus事件之后的，所以可以在click事件中让input标签获取焦点

在 mousedown 事件中让 input 标签获取焦点的问题相关推荐

IOS系统中input标签获取焦点页面会放大的问题
IOS系统中input标签获取焦点页面会放大的问题在iOS系统中打开网页,input框输入时,输入框获取焦点的时候页面会放大,如果没有经过设置,页面放大之后就不会自动还原.使内容撑开浏览器,底部产生 ...
html input得到内容,js获得html中的input标签内容
各种input标签,定义不同的name="?",通过按钮调用js获得 ---------------------单选按钮,组名是1 --------------------复选按钮 ...
history.go(-1)返回页面后，此页面中的input标签隐藏域中的值消失
问题描述:通过javascript:history.go(-1)返回页面后input标签隐藏域中的值消失解方法:将 <input type="hidden" value=& ...
Html5中的input标签之多少
请问在input的标签中的type属性你知道多少呀!我们一起来回顾回顾(Html5第一课) Html5中type必有的以下的特殊属性 color date datetime datetime-loca ...
uni-app中让input标签在点击时清空
<input type="text" :value="inputValue" @focus="vauleEmpty"/> 1,动 ...
【HTML 教程系列第 22 篇】 HTML 中的 input 标签，看这一篇就够了
这是[HTML 教程系列第 22 篇],如果觉得有用的话,欢迎关注专栏. 文章目录一:什么是 input 标签 ? 二:input 标签中 type 属性取值有哪些 ? 1:text 单行文本框 2 ...
elementUi中使用input标签maxlength不生效
今天使用elementUi的input组件输入用户年龄的时候,type=number,然后增加限制maxlength=3;结果发现maxlength不生效.然后找到了以下解决办法.算是一个取巧的方法吧 ...
Input 框中的 placeholder 属性获取焦点清空
本人在开发一个微信小程序时,遇到如下问题: input 框获取了焦点,但是 placeholder 属性的值却仍然还在,必须输入任意数据后,该值才会隐藏,这会给用户一种不好的体验效果. 理想效果应为: ...
前端html小技巧—input标签详解
今天分享下前端html小技巧-input标签详解 ,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧. 定义和用法 inp ...

在 mousedown 事件中让 input 标签获取焦点的问题

问题

原因分析

解决方案

在 mousedown 事件中让 input 标签获取焦点的问题相关推荐

最新文章

热门文章