点击按钮后input输入框不失去焦点 JS阻止默认事件

最新推荐文章于 2024-05-29 08:39:03 发布
最新推荐文章于 2024-05-29 08:39:03 发布
阅读量1.2w 收藏 7
点赞数 9
文章标签： 阻止默认事件 js 输入框 焦点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21744873/article/details/80695481
版权

想实现一个登录界面常用的效果：点击按钮后切换input框的显示/隐藏密码

首先想到的是，在按钮的点击事件里调用focus()使input获得焦点，代码如下：

<body>
	<input id="psw" type="password">
	<button id="btn">显示/隐藏</button>
</body>
<script>
	var isExposed=false;
	var btn=document.getElementById('btn');
	var psw=document.getElementById('psw');
	btn.onclick=function(){
		psw.focus();
		if (isExposed) {
			//切换为隐藏
			psw.type='password';
			isExposed=false;
		}else{
			//切换为显示
			psw.type='text';
			isExposed=true;
		}
	}
</script>

 

可这样做的效果是input失去焦点后又马上获得，效果不理想。

 

于是使用第二种方法，在按钮的onmousedown事件中阻止默认事件，代码如下：

<body>
	<input id="psw" type="password">
	<button id="btn">显示/隐藏</button>
</body>
<script>
	var isExposed=false;
	var btn=document.getElementById('btn');
	var psw=document.getElementById('psw');
	btn.onclick=function(){
		if (isExposed) {
			//切换为隐藏
			psw.type='password';
			isExposed=false;
		}else{
			//切换为显示
			psw.type='text';
			isExposed=true;
		}
	}
	btn.onmousedown=function(e){
	        //现代浏览器阻止默认事件
	        if ( e && e.preventDefault ) 
	            e.preventDefault(); 
	        //IE阻止默认事件
	        else 
	            window.event.returnValue = false; 
	        return false; 
	}
</script>

ok 成功实现效果~ :D

c小刺猬
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
按钮接受回车事件的三种实现方法
09-04
这样，无论用户在哪个输入框按下回车，都能触发这个隐藏按钮的点击事件。 ```html <input type="button" onclick="noClick()" style="margin-top:-1024px;" id="noUseButton" /> <script type="text/javascript"> ...
javascript 跨浏览器开发经验总结（五） js 事件
10-29
为了避免这种情况，可以在`onclick`事件处理函数中返回`false`，或者将`href`设置为`javascript:void(0)`来阻止默认行为。 `onload`事件用于在页面完全加载后执行指定的脚本，包括所有图像、CSS和JavaScript。在`...
点击按钮,文本框如何不失去焦点
weixin_33835103的博客
04-17 1460
2019独角兽企业重金招聘Python工程师标准>>> ...
阻止默认行为
qq_34283987的博客
09-16 456
默认行为例如：a链接标签的默认行为是跳转，提交按钮的默认行为是提交，阻止默认行为即在默认行为发生之前与用户交互，获得用户的选择后，选择进行何种行为。不同浏览器的阻止默认行为的方式、代码： IE: event.returnValue = false; FF: e.preventDefault(); 两个浏览器兼容代码：return false;示例代码：阻止表单提交： <!DOCTYPE htm
uniapp input点击旁边按钮，如何不失去焦点
最新发布
morecccc的博客
05-29 725
uniapp input点击旁边按钮，如何不失去焦点。input手动获取焦点
uniAPP 如何不让输入框不失去焦点（ 阻止点击默认事件）
weixin_45567213的博客
05-12 4297
场景：输入框与发送按钮是兄弟关系。输入框获取焦点时会唤起键盘，点击发送的输入框会失去焦点。 要求：点击发送按钮时，输入框不能失去焦点，键盘一直呈现唤出状态 分析： 当我们点击某一个元素时，这个元素就会默认获取焦点，在上述场景中，输入框在获取焦点时会唤出键盘，但是由于发送按钮与输入框不是同一个Dom元素，所以点击发送按钮时输入框就会失去焦点，发送按钮就会回去焦点，键盘就是收起。 如果阻止点击Dom元素的默认获得焦点这个事情，那么上一个获取焦点的Dom元素就不会失去焦点。也就是输入框不会失去焦点，键盘就
js事件-阻止默认操作
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
05-28 1658
默认操作 具体指的是什么呢？看如下实例：(1)把单击事件处理程序注册到一个锚元素，而不是一个外层的&lt;div&gt;上，那么就要面对另外一个问题：当用户单击链接时，浏览器会加载一个新页面。(2)当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。这种行为与我们讨论的事件处理程序不是同一个概念，它是单击标签元素的默认操作。 如果我们不希望执行这种...
js事件传播流程，事件阻止
ly521xp的博客
06-10 185
js事件传播流程 浏览器的默认行为 JavaScript事件本身所具有的属性，例如a标签的跳转，Submit按钮的提交，右键菜单，文本框的输入等。 js事件传播流程 DOM2级事件规定事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段 捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象； 目标阶段：到达目标事件位置（事发地），触发事件； 冒泡阶段：再从目...
input 日期选择功能的javascript代码
10-29
- **关闭按钮或失去焦点自动关闭**：确保用户在选择日期后能够关闭弹出层，可以通过点击关闭按钮或者当输入框失去焦点时自动关闭。 - **日期验证**：确保用户选择的日期有效，例如不能选择超出范围的日期（如未来某...
如何防止INPUT按回车自动提交表单FORM
11-29
总结来说，防止`<input>`按回车自动提交`<form>`表单，可以通过增加隐藏的`<input>`元素或者使用JavaScript监听并阻止回车键的默认行为。这两种技术在实际开发中都得到了广泛的应用，可以根据项目需求选择适合的实现...
Javascript中click与blur事件的顺序详析
10-19
在一个常见的应用场景中，一个input输入框在用户输入后点击“X”按钮进行清除。当用户完成输入并点击按钮取消时，预期的行为是先触发button的click事件，然后取消输入。然而，实际情况可能并非如此。如描述所示，...
微信小程序bindtap事件与冒泡阻止详解
10-16
主要介绍了小程序bindtap事件与冒泡阻止详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
[js]jquery禁用input获取焦点的默认事件
Aran_的博客
05-29 1199
$("#ele").focus(function(){ document.activeElement.blur(); })
day31-33阻止默认事件的方法
RealRecall的博客
12-14 447
代码如下： var input = document.querySelector("input"); input.onclick = function (e) { if (input.checked == false) { e.preventDefault(); } }; 这样的话，checkbox就无法取消了。因为当checked的值想要变成false时，input的默认事件，即“改变checkbox的状态”这个默认
js 如何点击某个地方不失去焦点
一片天空
06-11 1556
用mousedown $('body').on('mousedown', 'div', function () { event.preventDefault(); });
阻止事件默认行为 事件委托
qq_56597325的博客
07-05 83
事件委托，阻止事件默认行为
如何阻止点击其他区域，input框会失去焦点事件
weixin_44041976的博客
07-21 7125
如何阻止点击其他区域，input输入框会失去焦点位置阻止失去焦点通过a标签设置user-select为none：通过js阻止默认事件通过内联js实现 在开发过程中，总会碰到以下两个情况： 要求点击某个区域，阻止input框 (或者设置了 contenteditable=“true” 的编辑区)失去焦点。 要求像微信输入框那种点击选择表情、图片等要求保留原来焦点的位置的情况。因为一失去焦点位置，除非是往最前面或最后面插入，否则要想在原来的地方插入内容是很难的。 接下来就分享一下个人的一些方法总结。 阻止失
js设置点击某地方input框不失焦
sqniis的博客
11-01 1001
js设置点击某地方input框不失焦
微信小程序
Mia的博客
05-22 208
小程序传参 小程序传参与vue传参不同，小程序如果直接在方法后面加（），会报警告，且没有任何效果。 小程序如果想在页面中传参，需要自定义属性： <view class="tab-con" bindtap="onTap" data-index="1"> 使用： onTap(e) { console.log('微信小程序传参', e.currentTarget.dataset['index']) } 小程序组件子页面向父页面传参 子页面： onTap() {
vue的input输入框 鼠标失去焦点事件叫什么
08-12
在 Vue.js 中，`input` 输入框的鼠标失去焦点事件可以使用 `@blur` 或者 `v-on:blur` 来绑定。例如： ```html <input type="text" @blur="handleBlur"> ``` 在上述代码中，`handleBlur` 是一个在失去焦点时触发的方法。你可以在 Vue 实例中定义该方法，然后在失去焦点事件发生时执行相应的逻辑操作。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值