vue input如何获取焦点,急 5C

一个组件里面用v-for 遍历出了多个input框,按钮只有一个,如何点击按钮,根据参数0,1,2,3。根据参数来让对应的第几个input框获取焦点

0

1个回答

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue中实现点击按钮使input显示的同时获取焦点
需求说明:点击搜索按钮出现input框,并自动使input框聚焦。n如图所示:nnn实现方式1:利用vue的refnhtml代码如下:n<input ref="inputVal" class="searchInp" type="text" v-model="searchVal" placeholder="搜索标题或内容..." />n<div v-show=&quot
vue 2.0 特性 点击其他地方使input输入框获取焦点
<div id='el'><input type="text" ref="content" />n<button @click="getFocus">getFocus</button><div>new VUE({    el:"#el",methods:{ngetFocus(){n t
Vue中自动获取input焦点
 nnn<input v-focus type="text" name="search" ref="input" autofocus v-model="inputValue" maxlength="10" @input="handleOnInput()" class="search-inp" placeholder="搜线路"&
vue之input 指令 获取焦点
n<li v-for="(i,k) in roleList" :key="k" :class="{'active':isActive==k}">nn    <el-input v-model="i.vRoleName" v-if='i.isEdit' v-on:blur="i.isEdit=false"nn        v-focus="{ cls: 'e
vue+element在进入页面时input自动获取焦点
需求:进入登录页面时,用户名输入框自动获取焦点n只需要修改input标签就可以了,加上autofocus就可以了n<el-input></el-input>nn改为:n<el-input autofocus></el-input>nnn...
vue 自定义指令自动获取文本框焦点
HTML:{{tag}}njs:n官方例子:ndirectives: {n focus: {n // 指令的定义n inserted: function (el) {n el.focus()n }n }n }我的:ndirectives: {n focus:function (el) {
在Vue中输入框自动获取焦点的三种方式
n原生JS操作DOMnn使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似)nn//html部分n 编号:<input type="text" v-model='newId' id='inputId'>n//vue对象nvar vm = new Vue({n el: '#app',n data: {n newId...
Vue 中使用 el-input 自动获取焦点和二次获取焦点问题
最近,碰到一个问题,就是输入框旁边有一个编辑按钮,点击时,才可以对输入框进行编辑:nn要实现的效果:nn为了方便输入,需要自动获取焦点,所以加入了autofocus,但是发现,只有第一个并且第一次点击才起作用。n查了网上的一些文档,说是跟dom的渲染顺序和数据的缓存有点儿关系,至于深层次的原因,还没查到,希望有知道的朋友,不吝告知。n然后使用了Vue提供的自定义指令来解决,还有一点儿需要注意,el...
vue进页面第一个input框自动获得焦点
方式一:自定义指令使得进入页面自动获得焦点 nnn<input v-focus type="text">nnn// 注册一个全局自定义指令 `v-focus`nVue.directive('focus', {n // 当被绑定的元素插入到 DOM 中时……n inserted: function (el) {n // 聚焦元素n el.focus()n }n})nnn...
初始页面 input获取焦点 (可适用于移动端弹出软键盘) (vue封装的事件)
最近做移动端有一个需求nn开始input不能编辑,点击一个按钮使input弹出软键盘可编辑nn先给input设置 readOnly=falsenn然后给按钮加点击事件使 input的readOnly=truenn然后nn$("#uName") //你要弹出软键盘的inputnn.trigger("click")nn.focus();nn nn nnvue封装事件nnnVue.directive('...
vue中监听input框获取焦点,失去焦点的问题
一、背景n      博主之前在用vue的获取焦点,失去焦点的时候,出现了@blur和@focus无效的情况。当时百思不得其解。今天又在写vue页面的时候,突然@blur和@focus又好用了。emmmm,看来这部分值得一战。n二、首先是正宗的监听事件的写法n1、html代码n//这是html的输入框。定义了一个获取焦点,失去焦点的方法n...
Vue 进入新页面时input获取焦点方法(个人笔记)
Vue进入新页面时,获取input焦点,官网上推荐方法是:nn在你的项目入口文件(main.js)注册一个全局自定义指令 `名字自定义`nn// 注册一个全局自定义指令 `v-focus`nVue.directive('focus', {n // 当被绑定的元素插入到 DOM 中时……n inserted: function (el) {n // 聚焦元素n el.focus()n...
vue默认input获取焦点
vue默认input获取焦点nhtml:n<input ref='gain' type="text" v-model="mesnum"/>nnjs:必须有外层nthis.$nextTick( () =>{n this.$refs.gain.focus()n})nnnn
iphone打开vue项目输入框不能获得焦点,也不能输入内容
问题描述:nn使用vue开发的项目,其中有需要输入手机号,验证手机验证码的功能,但是发现iphone打开时,点击输入框,可以调起输入法,但是无法显示输入光标,也不能输入内容(不能获取input框输入焦点)nn问题产生原因:nncss样式设置中的某些会产生影响,如-webkit-touch-callout:none;nn问题解决:nn检查样式中是否有如下设置nnn {n        -web...
vue项目input框得到焦点选中文字
最近项目中有个需求,input框获取焦点时需直接选中文本内容。代码:<el-input v-model="addDialogForm.name" @focus="focus($event)"></el-input>//得到焦点选中focus(event) { event.currentTarget.select();}如有问题欢迎交流讨论。...
vue 进入页面获取input 焦点
移动端搜索页面nn进入页面后,获取到 input 的焦点, 才能弹出键盘nn使用H5属性值可以获取到焦点nnn<input v-model="keyWord" class="search-inp-item" type="text" autofocus="autofocus"/>nn但是,第一次进入可以, 返回再次进入就不能获取到焦点了nn使用官方的解决方法nn在main.js中加上nn...
vue input自动获取焦点
方法一 这个方法适合vue插件,id比较好绑定nnn// html 部分n<input type="text" id="name">nnnn// js部分nmounted() {nn this.$nextTick(() =>{n document.getElementById('phone').focus();n ...
禁止页面拖动(设置viewport)、vue 开发H5,点击input之后,页面在iPhone上放大,移动端开发,IOS、iPhone,表单input元素获取焦点时页面被放大的解决办法
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828nn直接贴方法了,打包之后,之前的meta替换成下方的代码即可n<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-s...
移动端开发,IOS、iPhone,表单input元素获取焦点时页面被放大的解决办法。
真心觉得移动端开发坑好多,不过解决问题也有不少乐趣,也能总结很多经验方法,都是之前遇到的,想记录下来方便翻阅。在iOS测试的时候,每次input获取焦点都会使页面放大,真是要多丑有多丑,经多方求助终于得到这个美丽的方法解决一下,之前总是在head中写超多的meta标签,但有一些都没去追寻他们是啥意思。这个问题就是吃了这个亏。<meta name="apple-mobile-web-app-capab
input获取焦点时候value值隐藏,失去焦点的时候显示
我们经常在开发过程中会遇到这样的问题,就是当我们给input添加一个value值时候,会覆盖掉placeholder,但是当我们去修改的时候呢,她本身呢又不会自动的消失,这时候input的另外两个属性就可以派上用场了,获取焦点事件和失去焦点事件:rninputrnrntype="text"rnrnonfocus="javascript:this.value=''"rnrnonblur="javas
input自动获取焦点在移动端自动弹出手机软键盘
一、input自动获取焦点    正常来说,在input标签添加autofocus属性就可以了。代码如下:<input id="search" type="search" placeholder="搜索" autofocus="autofocus"></input>二、在使用Iscroll框架组件的页面实现input自动获取焦点   因为Iscroll 在初始化的时候会阻止所有事件,所以input聚
Vue手动获取input焦点
n n n 项目里面有这样一个需求,nnnnnnimage.pngnn点击底部“发送验证码”的时候,弹窗图形验证码,并且图形验证码里的input自动获取焦点,很合理的需求,在iOS里面直接 [textField becomeFirstResponder]就可以了。n在项目里试了 focus(),autoFocus,都达不到效果,对vue也只是简单的了解,还是查阅文档吧...
input组件里面的placeholder在获取焦点时清空
&lt;input type="text" placeholder="请输入" onfocus="this.placeholder=''" onblur="this.placeholder='请输入'"&gt;nnn
VUE input focus事件阻止冒泡 阻止父元素事件触发
n@click.stop.native=&quot;stopstop&quot;nnfocus 改成 click 加 stop 加 native。
用 focus 获取焦点并设置样式
input:focus,textarea:focus{n background-color:#CCC;n}
移动端input获取焦点时,调用键盘,页面自动上移
在body里添加n&amp;lt;body onresize=&quot;document.activeElement.scrollIntoView(true);&quot;&amp;gt;nnn
如何使input元素获取焦点时,placeholder内容清空
在HTML中,placehoder作为input的一个比较重要属性,可描述input输入预期值的简短提示作用,该提示会在用户用户之前显示在输入字段中。不过,有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值并不会消失,只有输入数据时才消失。这种问题一旦不能解决,会在很大程度上影响用户的体验。因此,我们可以通过以下代码来解决这种问题。原HTML&amp;lt;input type=...
input 获取焦点 蓝色边框 去掉 outline
最近发生了一些前端小问题,会在博客一一记下来nn第一篇是 outline 属性的使用nn去除input的边框nn开始有以下方案nnnn input{text-indent: 1em;}n #search1{ }n #search2{ border-width: 0; }n #search3{ border:1px solid red; }n #search4{ outline:medium;}n ...
vue爬坑记录:ios系统下,输入框聚焦后页面放大,失去焦点后,仍然是放大状态
禁止页面缩放即可,在index.html,head内加入以下代码:n&lt;meta name="viewport" content="width=device-width,n initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;n &lt;!-- n initial-scale - 初始的缩放比例n m...
element 中点击table中的某一行,使对应行中的Input获取焦点
css中使inputh获取焦点的方法是: autofocus='true'nn在项目中点击table表格中的行,使input获取焦点nnelement中table点击行的事件 @row-click=&quot;clickInput&quot;nmethods: {nclickInput(row, event, column) {n if (column.label === '能力打分') { // 行中对应的某...
vue 关于input和textarea自动聚焦问题
如果是单纯的聚焦行为(即input或者textarea的value值为空的状态下),用以下代码即可解决n方法一:n &amp;lt;textarea name=&quot;&quot; id=&quot;&quot; :placeholder=&quot;placeholder&quot; v-model=&quot;newMessage&quot; ref=&quot;focusTextarea&quot;&amp;gt;&amp;lt;/textarea&amp;gt;nn mounted()
五八、移动端input、textarea无法获取焦点
-webkit - touch - callout: none; n. 阻止长按图片之后呼出菜单提示复制的行为n-webkit-text-size-adjust: none; n. 禁用Webkit内核浏览器的文字大小调整功能。n-webkit-tap-highlight-color: rgba(0, 0, 0, 0); n. 避免点击a标签或者注册了click事件的元素时产生高亮n-webkit-
获得焦点除去class和失去焦点获得class
html:rn餐厅员工数:人rnrnjs:rn$('.top-relative input').focus(function(){rn$('li.top-relative').removeClass("top-relative").css('background','red');rnrnrnconsole.log(3);rn})rn$('.top-relative input').blur(fun
input框获取焦点点击 横线动画效果实现
具体效果实现nnnnn&amp;lt;!DOCTYPE html&amp;gt;n&amp;lt;html lang=&quot;en&quot;&amp;gt;n&amp;lt;head&amp;gt;n &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;n &amp;lt;title&amp;gt;input下拉横线动画实现&amp;lt;/title&amp;gt;n &amp;lt;style&amp;gt;n body{n
iOS下Html页面中input获取焦点弹出键盘时挡问题
iOS下Html页面中input获取焦点弹出键盘时挡问题rn原因:rn1.ios之所以会遮挡输入框, 是因为, 第三方输入法的tool bar 或者 键盘也被当做可视区域了(包含在键盘弹出时的window.innerHeight)rn2.js拿不到键盘的 弹起/收起 事件;rn3.ios上键盘 弹起/收回 不会触发window.resize事件;rn4.android 4.4 以下, 键盘唤起时,
今天跟大家分享一下关于input框获取焦点和失去焦点的问题。
首先页面中有个id为input1的input框,如何让页面加载完事让其获取焦点呢?rn以前我们都是用jQuery中的focus()方法。自从HTML5出现以来,出现了很多不一样的属性和标签等等,我们得跟上时代的潮流,HTML5中有一个属性,‘autofocus’,我们只需要在input中加上这个属性(就像这样),就能使其自动获取焦点。rn还有一个问题就是我们如何手动让input失去或者获取焦点呢?
移动端解决input获取焦点软键盘弹出影响定位的问题
n n n n这是刚做前端时候写的文章,拿到简书上做记录吧!以免以后再遇到这样的坑。nn在最近的一次H5页面开发中,发现在安卓端点击输入框的时候虚拟键盘会把最下边的‘保存’按钮顶上去。n在试了很多方法后找到了解决方案:n代码如下:n$('#phone').bind('focus',function(){n $('.bottom_fix').css('positi...
设置input输入框的默认内容,获得焦点,内容消失
原始操作:HTML5新操作:效果:
iOS下无法触发focus事件的问题
前提我的思路需要在点击事件之后,先让一个input元素失去焦点,再让另一个input 元素获取到焦点,代码如下: $('#xd_content .tabcontent .nav').on('click', function () {n $('#xd_content ').blur();n setTimeout(function () {n $(
Vue单页实现返回&去掉input获取光标时边框
n n n 在Vue 中添加@click=&quot;$router.go(-1)&quot;即可实现返回上一个页面;n添加outline: none; 即可去掉input输入框获取到光标时的边框。nn当我们需要设置input输入框 focus时输入框的border样式的时候,必须先设置outline:none;设置的样式才会生效。nnn n nn...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 如何学python 如何学习javaee