vue判断input框获取焦点以及失去焦点，让input框自动获取焦点

已于 2023-03-30 16:09:20 修改
阅读量3.5k 收藏 4
点赞数 1
分类专栏： vue 文章标签： vue
于 2023-03-30 15:39:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stars______/article/details/129859019
版权 
<input type="text" @focus="searchfun" @blur="searchfun_close" ref="inputref">
//input失去焦点时执行的方法
searchfun_close(){
    this.searchpopupShow=false
},
//input当前获取焦点执行的方法
searchfun(){
    this.searchpopupShow=true
},

//让input框获取焦点
searchfuns(){
    this.$refs.inputref.focus()
}

@focus方法当获取焦点时执行

@blur方法当失去焦点时执行

通过ref让input框获取焦点

秃头黑魔仙
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
文本框(input)获取焦点(onfocus)时样式改变的示例代码
12-11
摘要：许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果。其实很简单，我们只需要获取页面上的文本框，加上onfocus事件或者其他对应的事件即可。本文介绍了如何在获取焦点时切换样式，明白原理后，实现其他效果就很简单了。 许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果。其实很简单，我们只需要获取页面上的文本框，加上onfocus事件或者其他对应的事件即可。本文介绍了如何在获取焦点时切换样式，明白原理后，实现其他效果就很简单了。 代码如下: function focusInput(focusClass, no
vue3 获取焦点，vu3 input 获取焦点 Vue 3 focus input
09-08
我们都知道在vue2中获取焦点为,然后调用focus方法 this.$nextTick(()=>{ this.$refs.XXX.focus() }) 现在我们的vue3怎么获取焦点，请看附件，已经正常使用。 请放心下载
vue 页面一加载直接让输入框获得焦点，或者失去焦点的方法
PrimaryColor
08-01 5179
输入框有两个方法： focus()：获得焦点。 blur()：失去焦点。
Vue经典实例之可编辑的表格table（史上最简单方便的处理方式，比用element容易理解），同时处理input获取焦点的问题！不好用你找我
最新发布
2401_84093899的博客
04-08 1117
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以领取。
【vue 的el-input自动获取焦点】( 登录页 )
m0_57426442的博客
11-16 2287
el-input是element UI的一个输入框组件， 可以通过自定义指令来实现el-input的焦点，下面是两种实现方式 ，喜欢那个用哪个！2、使用指令 v-el-fous。两种方法都可以实现焦点问题。1、使用指令 v-focus。
element-ui vue input输入框自动获取焦点聚焦方式
PB瓦工
06-20 872
【代码】element-ui vue input输入框自动获取焦点聚焦方式。
vue中input输入框常用事件的使用
estrusKing的博客
12-14 1万+
文章目录@input（或者是v-on:input）@blur（失焦）@focus（聚焦）@change（改变）@click （点击）@dblclick（双击）@keydown（当键盘按下）@keyup.enter（当按下回车键） @input（或者是v-on:input） 输入框里面内容发生改变（且不用失去焦点）时触发 跟随输入框输入内容实时变更数据 适用于实时查询，每输入一个字符都会触发该事件 @blur（失焦） 输入框失去焦点时触发 输入框在输入完成、移到其他地方时进行验证时，需要用到该事件，用此事件进
vue input 获取焦点并选中
xuexi0754的博客
06-20 1017
通过id获取焦点并选中
获取焦点失去焦点事件
weixin_43608739的博客
05-08 3655
<style> input { color: gray; outline: none; } </style> </head> <body> <input type="text" value="请输入内容" id="txt"> &...
vue 自定义指令自动获取文本框焦点的方法
10-18
当用户进入页面或者触发某个事件时，文本框能够自动获取焦点，使得键盘立即弹出，方便用户输入。 首先，我们来看一个简单的HTML结构，其中包含一个`<input>`标签，并应用了自定义指令`v-focus`： ```html <p><b v-...
【JavaScript源代码】element input输入框自动获取焦点的实现.docx
12-28
　最近项目中在做表单的时候，需要自动滚动到评论框，并且让评论框自动聚焦，这就需要手动触发输入框的 focus 状态。　但是，element并不支持autofocus属性，那就只能通过原生的js效果获取聚焦效果了　document....
vue通过自定义指令使input输入框自动获取焦点
WanFengZhou
09-24 2063
在部分开发场景中 我们需要input输入框自动获取焦点 我们可以通过以下代码实现 使用自定义指令 v-focus <template> <el-input v-focus v-model="scope.row.comment" placeholder="请输入内容" @input="onInput"></el-input> </template> 在script中注册自定义指令 // 使用directives注册v-focus指令 directives: {
vue 自定义指令自动获取文本框焦点
lx_1024的博客
01-02 1万+
HTML：{{tag}} js: 官方例子： directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }我的： directives: { focus:function (el) {
Vue 中使用 el-input 自动获取焦点和二次获取焦点问题
热门推荐
钢铁之家
10-31 3万+
最近，碰到一个问题，就是输入框旁边有一个编辑按钮，点击时，才可以对输入框进行编辑： 要实现的效果： 为了方便输入，需要自动获取焦点，所以加入了autofocus，但是发现，只有第一个并且第一次点击才起作用。 查了网上的一些文档，说是跟dom的渲染顺序和数据的缓存有点儿关系，至于深层次的原因，还没查到，希望有知道的朋友，不吝告知。 然后使用了Vue提供的自定义指令来解决，还有一点儿需要注意，el...
vue input,textarea失去焦点调用函数方法
qq_24612793的博客
07-30 3万+
&lt;input type="number" class="num" value="1" @blur.prevent="changeCount()"&gt; methods:{ changeCount:function(){ }, }    
html中的css和js控制input，textarea文本框自动获取焦点
iceking66的博客
10-16 2万+
方法:1：js控制自动获取焦点 html> head> script type="text/javascript"> function setFocus() { document.getElementById('password1').focus() } function loseFocus()
Vue.js 里面有没有 focus 这样自动获焦点？
麻球科技
03-02 8071
在开发项目中  实在是遇到了不少类似的问题，也百度了不少，vue没有这样直接操作dom节点的方法 具体解决方案   1 使用vue的钩子函数，初学不久，还没解决 2 使用jquery，解决 希望可以帮助您
vue3输入框生成的时候自动获取焦点
The_more_more的博客
05-06 4298
vue3输入框生成的时候自动获取焦点 前言 当我们在做vue3的项目的时候，在对一些信息的修改的时候，需要双击或者点击按钮来进行操作，让数据变成输入框来进行修改数据，当输入框失去焦点的时候就进行保存，然而不方便的是，输入框出现的时候不能获取焦点导致用户的体验不好。 创建实例演示（创建文件，可忽略） 首先我们需要一个vue3的项目，如何创建一个vue3的项目，新建一个空的文件夹，cmd打开，输入 1. vue create 项目的名称 举例：vue create demo 我们选择自定义，即 2. Manua
vueinput自动获取焦点
06-09
在Vue中，你可以使用`v-focus`指令来实现自动获取焦点的效果。首先，在Vue实例中注册`v-focus`指令： ```javascript Vue.directive('focus', { inserted: function (el) { el.focus() } }) ``` 然后，在你的组件模板中使用`v-focus`指令来使输入框自动获取焦点： ```html <template> <div> <input v-focus type="text"> </div> </template> ``` 在上面的代码中，当组件渲染时，`v-focus`指令会自动为`<input>`元素设置焦点。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值