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

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

0

1个回答

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