【vue3+ts+vite】输入框默认获取焦点

已于 2023-08-08 11:09:07 修改
阅读量855 收藏 2
点赞数
文章标签： vue.js 前端 typescript
于 2023-06-21 14:35:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46580991/article/details/131327138
版权

1.HTML中输入框标签添加ref

 2.TypeScript中创建ref的命名属性，然后xxx.value&&xxx.value.focus()，即可获取焦点

 代码检查（type-check）容易出现问题：单独只写xxx.value.focus()，调试无异常，但是build打包会报以下错误

me_ll_you
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
vue3输入框生成的时候自动获取焦点
The_more_more的博客
05-06 4382
vue3输入框生成的时候自动获取焦点 前言 当我们在做vue3的项目的时候，在对一些信息的修改的时候，需要双击或者点击按钮来进行操作，让数据变成输入框来进行修改数据，当输入框失去焦点的时候就进行保存，然而不方便的是，输入框出现的时候不能获取焦点导致用户的体验不好。 创建实例演示（创建文件，可忽略） 首先我们需要一个vue3的项目，如何创建一个vue3的项目，新建一个空的文件夹，cmd打开，输入 1. vue create 项目的名称 举例：vue create demo 我们选择自定义，即 2. Manua
vue3 获取焦点，vu3 input 获取焦点 Vue 3 focus input
09-08
我们都知道在vue2中获取焦点为,然后调用focus方法 this.$nextTick(()=>{ this.$refs.XXX.focus() }) 现在我们的vue3怎么获取焦点，请看附件，已经正常使用。 请放心下载
vue3打开页面后文本框自动获得焦点
最新发布
徐同保的专栏
05-09 423
vue3打开页面后文本框自动获得焦点
Vue3实现页面刷新input自动聚焦的两种方式
weixin_68714627的博客
11-02 2504
v-focus在文件夹src/utils下新建文件夹directives存放聚焦的js文件// 确保元素挂载，数据被解析后，el.focus();});组件模板中组件脚本代码中// 若使用的是vue3的setup语法糖需要分出来写
Vue3.0ElementPlus＜input输入框自动获取焦点＞
热门推荐
weixin_45684041的博客
06-14 1万+
记录一下自己最近开发vue3.0的小小问题~~ 最近在做项目时，dialog弹框事件需定位input焦点，方便用户可直接输入。原理其实很简单，Element已经提供了focus方法，但是文档中并没有写明怎么调用。官方文档介绍： 正确使用方式：在el-input标签上加入ref属性，然后在需要的地方直接调用方法即可；代码如下（示例）： 2.引入ref和nextTick 代码如下（示例）： 3.在dialog打开事件中触发 代码如下（示例）：.........
vue3新特性中ref自动获取焦点.
pmywy的博客
02-28 1810
vue3新特性中ref自动获取焦点
【Vue】输入框状态切换&自动获取输入框焦点の实现
weixin_45912372的博客
04-10 3590
设置一个0ms的定时器，当浏览器执行到定时器时，会将定时器内部的函数放入延迟队列中，当定时器的等待事件结束后，会将函数放入消息队列的末尾，消息队列的执行按照先进先出原则，当前面的任务执行完成后，浏览器会自动执行。通俗的理解是：等组件的 DOM 更新完成之后，再执行 cb 回调函数。按钮展示输入框，并自动获取对话框焦点，失去焦点时展示。，实现点击按钮展示输入框，给输入框绑定失去焦点事件。时，页面已经根据最新的数据渲染完成了，此时我们执行。，确定输入框的展示状态，默认为。获取到显示的输入框的焦点(
uniapp + vue3 +vite + ts + pinia 框架模板
01-31
标题 "uniapp + vue3 + vite + ts + pinia 框架模板" 提供了我们讨论的关键技术栈。这是一个基于uni-app、Vue.js 3、vite、TypeScript和Pinia的项目模板，用于构建移动端应用。让我们逐一探讨这些技术的特性与它们在...
Vue3+Vite4+TS 后台模板
06-08
Vue3+Vite4+TS 后台模板是一款基于最新技术栈构建的高效、现代化的前端开发框架，专为后台管理界面设计。该模板利用了Vue.js的最新版本Vue3，搭配快速构建工具Vite4，以及TypeScript的静态类型检查，提供了强大的...
Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统.zip
05-13
Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + ...
【vue3】el-input 的获取焦点——el挂载：自定义指令，focus使 input 获取焦点（el-input 的Input Methods）
清凌的博客
06-03 7830
参考网址： （适用vue2）让element-ui的输入框聚焦的4种方式 ElementUI：使input自动聚焦的两种方法 使el-form中的el-input自动获取焦点 在vue3中，保留了自定义指令的特性——【官网链接】：自定义指令 代码：  注意这里的el需要使用el.children[0].focus();  因为el-input这是个组件，input外面被一层 div 包裹着, el打印出来是外面这个 div，需要找到内层的input 详情见：分析（点击跳转到分析） directives
vue3 antdv input输入 自动获取焦点的实现
qq_44792224的博客
05-25 2386
【代码】vue3 antdv input输入 自动获取焦点的实现。
vue3+elementUI回车键聚焦el-input
ahwangzc的博客
06-15 668
vue3+elementUI回车键聚焦el-input
vue3焦点获取、动态定位焦点,vue3光标定位，vue3 input focus
weijia3624的专栏
09-08 5210
vue3焦点获取、动态定位焦点,v <div> //获取焦点主要就是定义一个ref <input v-model="inputvalue" ref="inputVal"/> <button @click="addItem">提交</button> </div> methods:{ //事...
vue2/3定位光标位置,重新获取焦点
路飞船长的博客
09-25 2428
vue2/3定位光标位置,重新获取焦点,focus不生效
vue3+ts+uniapp实现小程序端input获取焦点计算上推页面距离
奔跑吧代码
09-04 1457
vue3+ts+uniapp实现小程序端input获取焦点计算上推页面距离
vue 实现循环组件按enter获取输入框焦点
qq_44162778的博客
11-11 491
vue 实现循环组件按enter获取输入框焦点。
vue3+ts+vite 监听input输入框
06-07
你可以使用 Vue3 中的 `@input` 事件来监听 input 输入框的输入。具体实现可以参考以下代码： 1. 在模板中使用 `v-model` 绑定 input 的值： ``` ``` 2. 在组件中定义 `inputValue` 变量，并定义 `handle...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值