html 文本框onfocus（获得焦点） 执行了多次原因

最新推荐文章于 2025-06-06 09:17:29 发布
最新推荐文章于 2025-06-06 09:17:29 发布
阅读量2.7k 收藏 1
点赞数 2
分类专栏： J2EE
本文介绍了一个简单的HTML示例，展示了如何使用onclick属性代替onfocus属性来避免文本框获得焦点时出现的死循环问题。

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

代码如下，非常的简单：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本框获得焦点</title>
</head>

<body>

<input id="text" type="text"onfocus="alert('你点击了')" ></input>

</body>

</html>

效果图如下：
这里写图片描述

实际上运行的效果并不是我想的那样，而是一直都在弹出 alert（）提示框

终于知道什么原因了，都是我的这个alert() 写的，因为我的 onfocus =” ” 这个属性是文本框获得焦点的属性，而alert 这个是

弹出对话框，当你点击弹出框的“确定”时，你的文本框就失去焦点了，而你点击了之后文本框又获得焦点了，这个时候就陷入死循环了

解决的办法： 不用这个onfocus =” ” 属性，换成 οnclick=”“属性，就O了。

48、文本框脚本编程全解析
pink7的博客
06-19 14
本文详细解析了网页开发中文本框的脚本编程技巧，涵盖事件处理、文本选择、输入过滤、剪贴板处理以及自动跳转到下一个字段等内容，并结合具体代码示例讲解了如何提升表单的交互性和用户体验。同时总结了不同场景下的应用策略及性能优化注意事项。
HTML开发指南
邓邓子的博客
09-26 2120
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。作为万维网的核心语言之一，HTML定义了网页内容的结构和布局。自1991年首次发布以来，HTML已经经历了多次更新和改进，目前最新的版本是HTML5。HTML5引入了自定义数据属性，允许我们在元素上存储额外的信息，这些信息不用于页面显示，但可以通过JavaScript访问。自定义数据属性以data-开头，后面跟上一个或多个小写字母名称。
在uniapp中当输入框input使用固定定位在底部 用户获取焦点时输入框会被弹起的键盘所遮住的问题
qq_60743005的博客
03-15 875
在 Uniapp 开发中，当输入框使用固定定位（）放置在页面底部时，用户点击输入框获取焦点后，输入框可能会被弹出的键盘遮挡，影响用户体验。
Onfocur和Onblur重复触发问题解决方案（文本框onblur事件连续触发的问题）
m0_38035006的博客
08-23 6083
html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> meta http-equiv="X-UA-Compatible" content="ie=edge"> title>Documenttit
掌握JavaScript的onfocus与onblur事件监听
最新发布
weixin_36074800的博客
06-06 1111
onfocus事件是当元素获得焦点时触发的事件。通常，这意味着用户已经点击了该元素，或者在输入字段中开始输入文本。在网页设计中，获得焦点并不限于输入字段；其他可交互元素如链接、按钮、甚至自定义控件都可以通过JavaScript来触发onfocus事件。要触发onfocus事件，用户行为是关键。例如，用户点击一个输入框，或者使用Tab键在表单元素间切换，触发的都是onfocus事件。除了直接的用户交互，还可以通过脚本代码设置或取消元素的焦点，比如会让id为myInput的元素获得焦点。
日常开发遇到的坑click && focus事件 运行2次函数的解决方法
weixin_34184561的博客
11-01 662
目标:同时有 click && focus 只执行一次函数. 问题:首先 click 和 focus 是不同的事件,focus并不能完全替代 click,当同时存在 click 和 focus 事件时,如果产生 click 事件则会同时产生 click 和 focus 2个事件,为了避免运行2次函数,用以下方式使其只运行一次函...
获取焦点/失去焦点（onfocus/onblur）练习
GrowingRick的博客
02-15 405
文本框获取焦点，清空信息 文本框失去焦点时， 如果为空 ，提示 不能为空， 如果为非数字，提示不合法， 如果长度小于6，提示“长度不够” 如果为数字，提示正确 <input type="text" name="" id="text" value="输入内容（数字）" /> <script> let txt = document.getEle...
jquery on()事件多次调用解决办法
Sunny__wei的博客
09-12 2249
今天闲的没事 写了个时时监控input框的组件，在用on() 方法进行绑定change事件时发现出现多次调用的情况。 现在说说自己的解决方法，和大家分享一下： var validators = function() { $(document).on("change","[validator]",function() { con...
焦点事件onfocus和onblur造成的死循环问题
clh386的博客
11-19 9033
在学习焦点事件的时候，使用onfocus和alert(),onblue和alert(),点击文本框触发onfocus（）事件，弹出alert文本信息，点击确定后又触发onblur事件，弹出alert()信息，再点击确定又触发onfocus事件，形成一个死循环，代码如下： <script type="text/javascript"> window.onload=function(){var tex
js+css使文本框自动适应内容的高度
10-29
- `onfocus`：这是一个事件监听属性，当文本框获得焦点（即用户开始输入时）时触发。此处的JavaScript函数会调整文本框的高度，使之与当前滚动高度（`scrollHeight`）相匹配，从而实现自适应。 - `onblur`：与`...
好看的文本框和按钮样式
12-20
`setTimeout`函数每400毫秒执行一次`borderColor()`函数，实现颜色切换，`onfocus="borderColor(this);"`和`onblur="clearTimeout(oTime);"`分别在获取和失去焦点时启动和停止定时器。 ### 知识点七：定时闪烁的...
var text = document.getElementsByTagName(&#39;input&#39;); text[0].onfocus = function () { // 手机注册获得焦点事件 if (this.value === &#39;手机&#39;) { this.value = &#39;&#39;; } this.style.color = &#39;#333&#39;; }; text[0].onblur = function () { // 手机注册失去焦点事件 if (this.value === &#39;&#39;) { this.value = &#39;手机&#39;; } this.style.color = &#39;#999&#39;; // 失去焦点需要把文本框里面的文字颜色变浅色 }; text[1].onfocus = function () { // 微信注册获得焦点事件 if (this.value === &#39;微信&#39;) { this.value = &#39;&#39;; } this.style.color = &#39;#333&#39;; }; text[1].onblur = function () { // 微信注册失去焦点事件 if (this.value === &#39;&#39;) { this.value = &#39;微信&#39;; } this.style.color = &#39;#f00&#39;; // 失去焦点需要把文本框里面的文字颜色变为红色 };
05-07
此外，使用onfocus和onblur属性来绑定事件处理函数是传统的方式，现代做法更推荐使用addEventListener来添加事件监听器，这样可以更灵活地管理事件，并且允许添加多个监听器。 还有，颜色值的设置可能需要统一，...
onfocus事件,onblur事件；Focus()方法,Blur()方法
热门推荐
Fanbin168的专栏
07-25 1万+
function checkValue(obj) { if (obj.value == "") { alert("长度不能为空"); obj.value = "长度不能为空"; } } function checkGetfocus(obj) {
uniapp中input框聚焦
huang_jimei的博客
11-14 1816
在需要聚焦的方法内写入。然后在失去焦点的时候。
HTML事件 onfocus（获得焦点） 和 onblur（失去焦点） 死循环问题
wangshiwen011的博客
05-30 1608
刚刚学到onfocus和onblur事件，我将两者组合在一起，用弹框来展示是否获得或失去焦点，发现根本就是死循环： <script type="text/javascript"> document.getElementById("inp").onfocus=function(){ alert("获得焦点了！"); } document.g...
当多个文本框都用onblur()验证时、页面会进入死循环
胡汉三
11-13 6385
欢迎技术交流。 QQ：138986722 最近在给老项目加验证文本框是否数字、不能为空、不能重复这些东西。 当我做好过后突然发现、我每个文本框都用管理onblur()事件来触发验证、结果进入了死循环！ 关闭页面都得用进程杀掉(或者右键关闭)...... 好了废话不多说、讲解决办法先： 多个文本框用一个onblur方法处理、采用if else结构 function prmecNo
微信小程序解决ios页面上推问题
IT_iosers的博客
11-14 3148
相信大家写原生小程序都遇到过一个问题，当输入框聚焦键盘弹起时，页面会自动上推，使得输入框刚好位于键盘之上，在安卓中推动的只是内容，但在ios中，推动的是整个页面，导致导航栏被推出屏幕外，如下：针对这个问题，目前的解决方案是将自动上推改成手动上推，让我们自己来控制页面内容的滚动。
onblur()无限触发问题
WARGON的博客
07-01 7485
当使用onblur事件时，如果调用alert、prompt，confirm之内的能挂起js执行的代码，可能会导致重复触发onblur事件。这时，可以使用onchange()事件来代替onblur()事件。 Onchange方法：输入框失去焦点并且value改变之后触发。    从上面的定义可以看出触发Onchange方法需要满足两个条件，value值改变并且输入框失去焦点。这样子在ajax执行过程...
关于在uni-app中键盘弹出页面内容被顶走的问题和内容总是保持在底部
justforcode1的博客
08-16 1643
事件来控制input的移动但是使用这个会导致input框显示有延迟，后面找了一下文档中提供了监控键盘高度变化的事件。在此之前找了很多文档看了对键盘的处理很多都是利用了input上的聚焦。
html文本框失去焦点
02-20
当处理HTML中的`<input>`元素时，有时需要精确控制其行为，比如在获得焦点后立即失去焦点以防止移动设备上的软键盘弹出。通过JavaScript可以实现这一功能。 对于希望阻止输入框获取焦点后触发默认行为的情况，可以...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值