如何阻止点击其他区域，input框会失去焦点事件

最新推荐文章于 2024-05-29 08:39:03 发布

hanson247

最新推荐文章于 2024-05-29 08:39:03 发布

阅读量7.1k

点赞数 3

分类专栏： html js 文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_44041976/article/details/107500025

版权

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

如何阻止点击其他区域，input输入框会失去焦点位置

在开发过程中，总会碰到以下两个情况：

要求点击某个区域，阻止input框 (或者设置了 contenteditable=“true” 的编辑区)失去焦点。
要求像微信输入框那种点击选择表情、图片等要求保留原来焦点的位置的情况。因为一失去焦点位置，除非是往最前面或最后面插入，否则要想在原来的地方插入内容是很难的。

接下来就分享一下个人的一些方法总结。

阻止失去焦点

<div id="test">test dom</div>

document.getElementById('test').onmousedown = event => {
  event .preventDefault();
  return false;
};

接下来是怎么防止失去焦点位置

通过a标签

主要思路是在要点击的元素外层套一个a标签，设置href=“javascript: ;”，阻止浏览器的默认事件。
个人强烈推荐使用该方式，没有兼容性问题，不会影响其他事件。

<a href="javascript: ;">
  click dom
</a>

设置user-select为none：

通过css样式实现，设置user-select为none即可，不过user-select兼容性不太好。
在这里插入图片描述
user-select
语法：
user-select：none |text| all | element
默认值：text

.chick-dom {
	moz-user-select: -moz-none;
	-moz-user-select: none;
	-o-user-select:none;
	-khtml-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

通过js阻止默认事件

主要思路是禁止页面选择以及鼠标右键

document.oncontextmenu = function() {
  return false;
}; 
document.onselectstart = function() {
  return false;
};

οncοntextmenu 鼠标右键事件
onselectstart 页面选择事件

通过内联js实现

实现方法是和上一个一样的

<body οncοntextmenu="return false;" onselectstart="return false">

hanson247

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
如何阻止点击其他区域，input框会失去焦点事件

如何阻止点击其他区域，input输入框会失去焦点位置阻止失去焦点通过a标签设置user-select为none：通过js阻止默认事件通过内联js实现在开发过程中，总会碰到以下两个情况：要求点击某个区域，阻止input框 (或者设置了 contenteditable=“true” 的编辑区)失去焦点。要求像微信输入框那种点击选择表情、图片等要求保留原来焦点的位置的情况。因为一失去焦点位置，除非是往最前面或最后面插入，否则要想在原来的地方插入内容是很难的。接下来就分享一下个人的一些方法总结。阻止失
复制链接

扫一扫

专栏目录