input的focus问题

最新推荐文章于 2024-01-26 19:39:08 发布
最新推荐文章于 2024-01-26 19:39:08 发布
阅读量3.4k 收藏
点赞数
分类专栏： # JQuery 前端 # JS 文章标签： focus
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/to_love_/article/details/77498726
版权
前端 同时被 3 个专栏收录
22 篇文章 0 订阅
订阅专栏
JQuery
15 篇文章 0 订阅
订阅专栏
JS
6 篇文章 0 订阅
订阅专栏

项目开发，需要实现一个功能：

有A、B两个日期框，选择了A日期后，需要根据数据配置的时间间隔，自动得到B日期

于是，需要通过post方式利用handler获取数据，

但是在调试的时候发现问题：

handler被不停的调用！

尝试写入日志，结果不停的写日志！

但是，不调试的时候，又没有这个问题！甚是诡异！


然后问了问度娘，还好有人也遇到这样的问题，应该是ie、火狐有这个毛病

focus机制，导致不停的死循环focus去了


那么就在focus调用后，直接blur，去死角的解决问题！


需要注意，blur的调用位置也有关系，我只能放在调用post之前才不会有问题


原文链接：

https://zhidao.baidu.com/question/492199254884606252.html

龙井茶Sky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
input的focus方法使用
09-05
input有个focus方法，今天发现就在onblur事件里面起作用，onchang等事件中根本不起作用的
element-ui，输入框focus事件调用$message后无限循环
Xu_Lisa的博客
12-09 1141
问题： 在输入框获取焦点(触发foucs事件)时，调用this.$confirm，此时点击确认取消弹窗，会无限触发输入框的focus事件； 解决 弹出框点击确认后，弹窗消失，但是输入框会再次获取焦点，因此需要手动移除输入框的焦点，因此对输入框调用blur()就能解决。 ...
解决切换input的类型,光标总是focus到首部(React)
weixin_43294560的博客
11-22 1773
起因:切换input的type类型,完成明文和密文的切换功能,发现每次切换后focus(),光标总是在首行 原因:每当切换时,会重新render,此时focus可能还未渲染完成,所以光标会在首行 解决方案: 方案一:在改变状态后,setState({...},()=>{回调中做focus()操作}) 方案二: ...
JavaScript---------input标签的focus属性
最新发布
cmHuney的博客
01-26 873
focus属性是一种，它表示用户聚焦或选中了某个可编辑字段或其他可交互元素。，用户可以开始输入文本或执行其他交互操作。focus属性通常与JavaScript事件处理程序一起使用，例如onfocus和onblur事件。在HTML中，可以将focus属性添加到<input>标签中以监测并处理界面元素的焦点状态。
input 输入框 focus更改样式
weixin_52630329的博客
06-07 2039
这里是希望改成浅黑色边框，发现不起作用，也无关层级，因为加了!important也没有作用，后来发现，在触发:focus时，用作突出的边框色，是由outline控制的，即获得焦点时，会被一个轮廓虚拟框围绕，而轮廓虚线框就是 outline。ps：当然，若你直接用js或jq的.focus去更改border的样式也是可以实现的。input标签的border和outline。
关于Input的自动聚焦
X2014W的博客
01-21 6335
关于Input的自动聚焦 哈喽，小伙伴们，没错，我又来啦！ 这次的分享主要是想记录一下日常。 首先呢，我要写的是一个input的聚焦，相信大家都知道聚焦就是focus（）方法，但是呢我写上去之后呢，foucus（）方法没有起到作用，就是我的输入框时无法自动聚焦的。这是为什么呢，因为我没有打开时就自动聚焦，所以呢，把它放在打开时调用的方法中，就是我们要做的第一步，那么第二步是什么呢，需要给他设置延时，关于怎么设置延时，在其他的文章中有专门的简述过，不知道的小伙伴可以去看看。 好了，记录就到这里了，不知道对小伙
Firefox中input元素,不能重新获取焦点函数focus()
aomiano55778的博客
01-10 304
js校验输入框的函数: function is_number(feild) { var strRegExp = /^\d+(\.\d{1,2})?$/; if (!strRegExp.test(feild.value)) { alert("请输入有效的数字,小数点后最多只能输入两位!"); feild.focus(); ...
Vue设置输入框input的焦点focus
superatom01的博客
05-13 6256
实际上，在我测试的一个列表的的应用里（列表每个元素有一个编辑框），这个$el也是个undefined，仍然不行。也就是从$refs里面拿出来这个组件后，它的第0个元素，才是input的真身。如果你试了上面的方法都不行的时候，别气馁，下面的方法也许能让你出坑。如果要实现页面加载后，立即让编辑框获得焦点并进入编辑状态，请移步。通常，你搜到的很多答案都说通过。你可能会遇到这个脚本错误的信息。
使用jquery给input和textarea设定ie中的focus
10-30
在浏览网站的过程中，我们经常可以看见当鼠标点击后样式改变的文本框和文本域,那么这种效果是如何实现的呢?
Cycle Input Focus Plus-crx插件
03-15
基于PC Spruijtenburg的Cycle Input Focus附加组件，此附加组件提供以下功能（快捷方式是可配置的）：-转到上一个文本输入字段-转到下一个文本输入字段-转到第一次登录（用户名）字段（密码字段）-转到下一个密码...
JavaScript实现为input与textarea自定义hover,focus效果的方法
10-23
主要介绍了JavaScript实现为input与textarea自定义hover,focus效果的方法,可实现根据鼠标事件动态改变input与textarea样式的功能,具有一定参考借鉴价值,需要的朋友可以参考下
使用focus方法让光标默认停留在INPUT框
09-04
让光标默认停留在INPUT框中，用focus方法可以实现，下面有个示例代码，需要的朋友可以参考下
input元素获取焦点focus设置光标位置setSelectionRange不生效的问题
feinifi的博客
12-10 7517
自己在开发中遇到的一个问题，input文本元素获取焦点，光标按理说需要停留在输入框文字之后。但是有的情况，并不是这样，有时候光标会移到输入框开始位置。即使设置了光标位置setSelectionRange(-1,-1)，但是也不会生效。 解决办法就是该方法setSelectionRange()在获取焦点方法之后做一个延时再执行: ele.focus(); setTimeout(function...
vue踩坑日记--input框的focus问题
qq_43612151的博客
07-26 9377
问题描述   想在el-input显示的时候focus。 <template> <div @dblclick="ondbclick"> <div v-show="!isEdit"></div> <div v-show="isEdit"> <el-input ref="editTask"></el-input> </div> <div> </templat
关于input标签:focus更改样式的问题
热门推荐
阿猫搬砖丶
01-11 4万+
input标签的border和outline 总觉得是一个自己踩了很多次的坑 若希望实现input在触发焦点时更改样式，通常会想到使用:focus选择器，但当使用border去更改样式时，会发现失效了: input[type=text]:focus{ border: 1px solid #AFECAB; } 这里是希望改成浅绿色边框，发现不起作用，也无关层级，因为加了!important也没有...
【小程序开发技巧】input框保持focus状态
Athain的博客
04-01 9641
最近在做一个小程序，用到了即时通讯框架，于是着手撸一个界面 （请别介意这爆丑的界面=3=） 开发者工具上，调试，即时通讯系统能够正常使用了，嗯，上真机~ 这时候就出现问题了。 因为点击input框时，会聚焦拉起键盘，但是点击发送时，input丢失了焦点，键盘就缩回去了，难不成要用户发一句点一下键盘？？ 查看官方api文档，对于input组件，有一个可能用的上的属性focus 属性名 类型...
如何阻止input的focus事件
ice_cream__的博客
12-09 4481
首先要明确Input标签各种事件的执行顺序，对于点击事件，是按照mousedown -> mouseup -> click这个顺序走的，那么focus事件在哪一步处理的？ 直接上代码： <input onFocus={focusHandler} onClick={clickHandler} onMouseDown={mouseDownHandler} onMouseUp={mouseUpHandler} /> handlers: const focusHandler
css小技巧，input框focus，让外层包裹input的div产生样式变化（可以当做是是div的focus伪类）
bittingCat的博客
09-27 2928
代码： css: .el-form-item { border: 1px solid rgba(255, 255, 255, 0.1); // background: rgba(0, 0, 0, 0.1); color: #454545; border-radius: 10px; border-color: #c7c7c7; transition: all .3s; margin-bottom: 36px; } .el-form-item:fo
element input focus()获取焦点无效？
weixin_55341181的博客
07-08 4053
有个业务场景需要需要点击表格单元格变成input编辑，点击其他地方input切换成span。如图：未编辑状态使用span显示 编辑状态切换成input 代码 在这里就出现了一个问题，那就是切换到input的时候 无法自动获取焦点，无法获取焦点的话就没办法点击其他地方关闭。在百度也找了很多办法，都是无效。最终的解决方案就是在html哪里把v-if改成v-show就解决了这个问题。修改代码.........
input focus
08-15
对于input组件的focus属性，可以通过设置它为true来获取焦点。在Vue中，可以通过在模板中给input组件指定ref的值，然后使用this.$refs来获取组件，进而设置焦点。例如，可以使用以下代码来设置焦点： ```javascript <input ref="user_name" /> ``` 然后在js中，使用如下代码获取并设置焦点： ```javascript let input = this.$refs.user_name; input.focus(); ``` 如果上述方法无效，可以尝试将获取到的组件元素用索引访问，例如： ```javascript let input = this.$refs["user_name"][0]; input.focus(); ``` 或者更简洁地写为： ```javascript this.$refs["user_name"][0].focus(); ``` 这样，就可以通过设置focus属性来使input框获取焦点了。希望这些方法能够帮助到您解决问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【小程序开发技巧】input框保持focus状态](https://blog.csdn.net/Athain/article/details/88959703)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Vue设置输入框input的焦点focus](https://blog.csdn.net/superatom01/article/details/130651013)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值