vue中光标自动显示到指定的input框内

最新推荐文章于 2024-02-29 15:39:55 发布
最新推荐文章于 2024-02-29 15:39:55 发布
阅读量5.7k 收藏 10
点赞数 6
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Ninewu/article/details/104900700
版权

给input 标签内加 ref="inputName "
然后在想要执行的地方写 this.$refs.inputName.focus()
举例：
在这里插入图片描述
如果想要打开这个页面的时候让光标显示到input框内 就要在mounted中加
在这里插入图片描述
如果想在执行事件之后让光标显示到input框内就加在事件中
在这里插入图片描述

Vue + Ant Design，在指定输入框内插入内容。
是秃子总会发光
03-03 2317
Vue + Ant Design，在指定输入框内插入内容。
vue2监测光标位置并手动定位到某个位置
Goaread的博客
03-28 957
在 getCursorPos 方法中，通过 textarea 获取 selectionStart 和 selectionEnd 的值得到光标的起始、结束位置，再通过调用 setSelectionRange 方法将光标的位置标注出来，实现定位。注意，这里使用的是 selectionStart，只能实现选择文本时对光标的监测，但我们可以将选择文本的起始和结束位置设置在同一个定位数值上，则相当于使用了选择文本功能，但却什么都没选，间接实现了定位到具体某个位置的功能。下面是实现光标位置的监测。
Vue光标默认在指定输入框
Sakura1998gis的博客
08-04 2356
在想要加光标的html页面上加上ID=“XX” 在mounted里面写上 this.$nextTick( window.onload = function () { // 光标默认位置 var oInput = document.getElementById('XX'); oInput.focus(); }) 即可
vue中将光标定位到Input上的问题
agwq1908的博客
01-08 3849
1 <template> 2 <div class="person_email"> 3 <div class="contain_email"> 4 <x-header :left-options="{backText: ''}">修改邮箱</x-header&g...
vue 如何获取input中光标位置，并且点击按钮在当前光标后追加指定内容
weixin_46054431的博客
02-17 9506
vue 如何获取input中光标位置，并且点击按钮在当前光标后追加内容 监听输入框的鼠标失焦事件 获取失去交点时的光标在输入内容中的位置 （e.srcElement.selectionStart） 替换指定内容 （str.slice(0, index)） 具体代码实现如下： <template> <el-input v-model="addForm.templateContent" type="textarea" @blur="blurEvent"></el-in
VUEJS将光标位置定时转移到输入框中
i_belive_my_love的博客
06-12 811
输入框 <v-text-field id="my-input" dense outlined hide-details v-model="fnpNo" @keyup.enter="doFNno" ></v-text-field> methods 在methods中编写函数，给输入框绑定焦点 setInputfocus(){ console.log("--获得焦点---"); window.document.getElementById("my-input").
vue让光标一直聚焦到页面的某个输入框
tt1234561009的博客
07-12 2125
我尝试了用其他方法，给 :focus绑定一个变量，初始化时赋值为true,操作下拉选择仓库的时候会触发@change事件，此时再给 :focus绑定的变量赋值为 true。如上图，要求光标始终聚焦在出库单输入框，我们第一想到的就是给输入框加上 :focus = true，但是实际上如果我们进行了其他操作，例如操作了选择仓库，这个时候光标就从出库单失焦了。注：给出库单输入框绑定失焦事件，失焦时 :focus 绑定的变量值赋为 false，切换下拉再重新赋值为 true 就可以了。这世界很喧嚣，做你自己就好。
一个默认focus的input组件vue
ichLiebDich的博客
05-26 459
<template> <!-- v-html="innerText" --> <input class="edit-div hover_focus" ref="input" v-model="innerText" contenteditable="true" @blur="shuchu" @change="changeText"/> </template
使用focus方法让光标默认停留在INPUT框
09-04
3. `focus()`方法被调用，将焦点设置到找到的`<input>`元素上，使得光标自动出现在输入框内。 需要注意的是，`focus`方法可能不会在所有情况下都能成功设置焦点，比如当前页面已有其他元素拥有焦点，或者浏览器有...
iOS11.3以下modal中input光标错位的解决方法
08-26
* iOS11系统的弹出层内input框光标错位问题。 * 移动端设置body的overflow: hidden不生效的问题。 * 页面回跳到顶部的问题。 通过了解这些问题和限制，可以更好地解决问题，提高开发效率和用户体验。
vue中input框消除边框
最新发布
10-19
在Vue.js中，如果你想消除`<input>`元素的边框，可以利用CSS样式来控制。通常我们会给输入框的`border`属性设置为`none`。假设你在HTML里有一个简单的输入框： ```html <input type="text" v-model="username"> ```...
vue中的input框，在光标的位置插入元素
Bigelonglong的博客
02-29 1017
【代码】vue中的input框，在光标的位置插入元素。
【vue/iview】将所选择的文本插入文本框的光标处
lixiang_0531的博客
12-14 1570
changeExpression(value){ console.log(value.name) //要插入的文本 let elInput = document.getElementById('expression'); let area = elInput.getElementsByClassName('ivu-input')[0] //获取输入框内容 let start= area.selectionStart; let end = a...
你不知道的vue——显示输入框时，光标自动聚焦
L3gacy
11-23 1385
v-focus属性 <el-input v-if="isShow" v-model="data" v-focus placeholder="请输入内容"></el-input> directives自定义指令 directives: { focus: { inserted: function (el) { el.children[0].focus() } } } 不要使用v-show，使.
vue-quill-editor使用中遇到的坑 - 回显数据后鼠标光标会自动锁定到文本框内
weixin_43630802的博客
05-13 1972
vue-quill-editor使用中遇到的坑 - 回显数据后鼠标光标会自动锁定到文本框内 发现问题: 回显页面本来就很长每次编辑内容时就会发现,哎嗨! 我的页面为啥会滚动到最下面了呢(组件就在最后面用的).刚开始没发现是光标锁定的原因就尝试了一下 window.scrollTo(0,0)发现并没有什么卵用...之后也是意外看到,我去.鼠标光标怎么在这儿了.好了 下面直接放解决方法了... this.$refs.myQuillEditor.quill.enable(false); setTimeout(()
Vue如何使得导航栏文字光标如何与内容同步
jakelihua
01-01 561
Vue如何使得导航栏文字光标如何与内容同步
vue获取+设置光标位置 光标定位 选择输入框文本
jeesr的博客
03-01 5976
是输入框组件，它不支持直接设置光标的方法。版本：vue2、vant2。在vue是用ref、
关于vue中input输入框不能正常输入值
qq_27808079的博客
08-05 3491
之前遇到同样的问题，今天同事也遇到了相同的问题，索性就写个博客记录下吧 如下的input: 由于没有在data里面初始化input，导致值不能正常输入，虽然是一个很简单的问题，项目中也可能会卡很久，还是要注意细节问题 ...
vue实现弹出框后光标自动定位到输入框Input
u013934601的博客
07-28 4337
当弹出框打开后，光标自动定位到弹出框里面的输入框 效果： 实现： 输入框代码 关键代码 ref="xxxx" 弹出框按钮加上如下代码：
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值