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

最新推荐文章于 2025-06-06 09:17:29 发布
转载 最新推荐文章于 2025-06-06 09:17:29 发布 · 2.7k 阅读 · 1

本文介绍了一个简单的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 9
本文详细解析了网页开发中文本框的脚本编程技巧，涵盖事件处理、文本选择、输入过滤、剪贴板处理以及自动跳转到下一个字段等内容，并结合具体代码示例讲解了如何提升表单的交互性和用户体验。同时总结了不同场景下的应用策略及性能优化注意事项。
HTML开发指南
邓邓子的博客
09-26 2115
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。作为万维网的核心语言之一，HTML定义了网页内容的结构和布局。自1991年首次发布以来，HTML已经经历了多次更新和改进，目前最新的版本是HTML5。HTML5引入了自定义数据属性，允许我们在元素上存储额外的信息，这些信息不用于页面显示，但可以通过JavaScript访问。自定义数据属性以data-开头，后面跟上一个或多个小写字母名称。
在uniapp中当输入框input使用固定定位在底部 用户获取焦点时输入框会被弹起的键盘所遮住的问题
qq_60743005的博客
03-15 853
在 Uniapp 开发中，当输入框使用固定定位（）放置在页面底部时，用户点击输入框获取焦点后，输入框可能会被弹出的键盘遮挡，影响用户体验。
Onfocur和Onblur重复触发问题解决方案（文本框onblur事件连续触发的问题）
m0_38035006的博客
08-23 6082
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 1070
onfocus事件是当元素获得焦点时触发的事件。通常，这意味着用户已经点击了该元素，或者在输入字段中开始输入文本。在网页设计中，获得焦点并不限于输入字段；其他可交互元素如链接、按钮、甚至自定义控件都可以通过JavaScript来触发onfocus事件。要触发onfocus事件，用户行为是关键。例如，用户点击一个输入框，或者使用Tab键在表单元素间切换，触发的都是onfocus事件。除了直接的用户交互，还可以通过脚本代码设置或取消元素的焦点，比如会让id为myInput的元素获得焦点。
日常开发遇到的坑click && focus事件 运行2次函数的解决方法
weixin_34184561的博客
11-01 661
目标:同时有 click && focus 只执行一次函数. 问题:首先 click 和 focus 是不同的事件,focus并不能完全替代 click,当同时存在 click 和 focus 事件时,如果产生 click 事件则会同时产生 click 和 focus 2个事件,为了避免运行2次函数,用以下方式使其只运行一次函...
获取焦点/失去焦点（onfocus/onblur）练习
GrowingRick的博客
02-15 404
文本框获取焦点，清空信息 文本框失去焦点时， 如果为空 ，提示 不能为空， 如果为非数字，提示不合法， 如果长度小于6，提示“长度不够” 如果为数字，提示正确 <input type="text" name="" id="text" value="输入内容（数字）" /> <script> let txt = document.getEle...
jquery on()事件多次调用解决办法
Sunny__wei的博客
09-12 2248
今天闲的没事 写了个时时监控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);"`分别在获取和失去焦点时启动和停止定时器。 ### 知识点七：定时闪烁的...
js技巧收集(200多个) 超强推荐第1/2页
10-31
示例代码展示了一个简单的应用，即当文本框获得焦点时清空默认文字“郭强”，当失去焦点且为空时恢复默认文字。 ```html 郭强" onfocus="if(this.value==&#39;郭强&#39;){this.value=&#39;&#39;}" onblur="if(this.value==&#39;&#39;){this....
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 1806
在需要聚焦的方法内写入。然后在失去焦点的时候。
当多个文本框都用onblur()验证时、页面会进入死循环
胡汉三
11-13 6384
欢迎技术交流。 QQ：138986722 最近在给老项目加验证文本框是否数字、不能为空、不能重复这些东西。 当我做好过后突然发现、我每个文本框都用管理onblur()事件来触发验证、结果进入了死循环！ 关闭页面都得用进程杀掉(或者右键关闭)...... 好了废话不多说、讲解决办法先： 多个文本框用一个onblur方法处理、采用if else结构 function prmecNo
解决chrome在onblur事件中同时使用alert和focus，循环弹框
sherry_y_fan的博客
07-16 3466
转自： https://stackoverflow.com/questions/48536618/onblur-onfocus-infinite-loop-issue-in-chrome Enter your number: <input type="text" id="fname1" onfocus="this.select()" onblur="myFunction(this)"&...
html文本框失去焦点
02-20
### HTML Input 失去焦点事件解决方案 当处理HTML中的`<input>`元素时，有时需要精确控制其行为，比如在获得焦点后立即失去焦点以防止移动设备上的软键盘弹出。通过JavaScript可以实现这一功能。 对于希望阻止输入框获取焦点后触发默认行为的情况，可以通过设置`onfocus="this.blur()"`属性来达成目的[^1]。此方法会在元素接收到焦点的同时立刻调用`blur()`函数移除焦点，从而避免了软键盘的显现： ```html <input type="text" id="phone-number" onfocus="this.blur()"> ``` 另一种方式是在外部脚本文件中定义相应的逻辑，而不是直接嵌入到HTML标签内联样式里。这样做可以使代码更加整洁易读，并且便于维护管理： ```javascript document.getElementById(&#39;phone-number&#39;).addEventListener(&#39;focus&#39;, function(event){ event.target.blur(); }); ``` 上述两种方案均能有效应对因输入框聚焦而引起的界面布局变动问题，在移动端开发场景下尤为有用。不过需要注意的是，这种做法可能会影响用户体验，因此应当谨慎考虑实际应用场景再做决定。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值