input 获取焦点的情况

第一种

<input class="ModifyInput" ref="test" v-model="valueEdit" />//获取焦点
1.this.$refs.test.focus()
2.this.$refs[·test·].focus()//模板字符串或引号

第二种动态生成的input

<input  class="ModifyInput"
:ref="`tableInput${i}-${index}`"
v-show="displayInputIndex === index && displayInputI === i"
v-model="valueEdit" />
//获取焦点let refName = `tableInput${this.displayInputI}-${this.displayInputIndex}`setTimeout(() => {this.$refs[refName][0].focus()  //获取焦点            this.$refs[refName][0].select()   //选中文本         }, 200)
// this.$refs[refName]拿到的是一个数组~所以用下标【0】具体来控制获取焦点
//很奇怪 如果这种方式强制性写 this.$refs['tableInput0-1'].focus() 会报错.focus is not a function
//应该是dom加载问题

ps：

<input class="ModifyInput" :ref="`aaa`" v-model="valueEdit" /> //:ref  模板字符串
//js
let test = `aaa`
console.log(this.$refs[test])//确切的标签this.$refs[test].focus()//能获取焦点this.$refs['aaa'].focus()//也能获取焦点

另外
table表格输入框 enter或tab键自动切换下一行
思路通过一个行下标和列下标切换

//displayInputIndex 行下标，displayInputI列下标
<input
class="ModifyInput"
:ref="`tableInput${i}-${index}`"
v-show="displayInputIndex === index && displayInputI === i"
v-model="valueEdit"
@blur="ModifyValue(i, index)"
@keydown="columInputKeydown($event, i, index)"
/>//js
columInputKeydown(e, i, index) {      switch (e.code) {        case 'Tab':        case 'Enter':        case 'NumpadEnter':          console.log('键盘事件', e)          e.preventDefault() //组织事件并发          // 先把编辑值存起来，再计算要展示输入框的两个索引值          this.valueSave = Number(this.valueEdit)          // 1.最后一行，最后一列时，回到第一行第一列          // 2.最后一行时，行清零，列+1          // 3.最后一列时，列清零，行+1          // 4.其他情况，就列+1          if (i + 1 === this.ChooseLine.charValues.length && index + 1  ===this.ChooseColumn.charValues.length) {this.displayInputI = 0            this.displayInputIndex = 0          } else if (index + 1 === this.ChooseColumn.charValues.length) {                                  this.displayInputIndex = 0            this.displayInputI = i + 1          } else {            this.displayInputIndex = index + 1          }          // 根据拼接的ref属性名，找到指定input的DOM，执行聚焦、全选事件          let refName = `tableInput${this.displayInputI}-${this.displayInputIndex}`           this.valueEdit = this.condition(this.displayInputI, this.displayInputIndex)          if (this.$refs[refName] && this.$refs[refName][0]) {            setTimeout(() => {              this.$refs[refName][0].focus()              this.$refs[refName][0].select()            }, 200)          }          break        default:          break      }
},

input 获取焦点的情况相关推荐

【杂记】（input获取焦点失去焦点、获取input中输入的值、键盘事件、js事件、Math 属性、手机自适应meta定义、去掉input内置阴影、图片居中、去蓝色默认背景、点击去掉默认边框）
1. input获取焦点失去焦点 input:focus{border:1px red solid:} 获取焦点 .focus()失去焦点.blur() 2. 获取input中输入的值 <inp ...
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案参考文章: (1)iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案 (2)https://www.cn ...
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案-scrollIntoView() 参考文章: (1)iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案- ...
input获取焦点软键盘弹出影响定位
解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题 $(document).ready(function() { va ...
解决input获取焦点时底部菜单被顶上来问题
当input获取焦点时底部菜单被顶上来问题解决方案: 1.如果是短页面,比如登录页,上部的登录表单div与底部的菜单div不会重合(两个div是同级的),可以通过设置登录表单div的z-index比底 ...
input获取焦点边框 outline属性
1. 清除input获取焦点时默认的边框 outline-style: none; <!DOCTYPE html> <html lang="en"& ...
Vue 自定义指令解决IOS webview input 获取焦点被键盘遮挡
Vue 自定义指令解决IOS webview input 获取焦点被键盘遮挡创建自定义指令在使用input的地方添加自定义指令,记录一下还有优化空间. vue 文件 <div id=&qu ...
input 获取焦点蓝色边框去掉 outline
这是一个系列,记录我前端开发常用的代码,小常识,有些是参考网上代码,(讲的可能有点烂,求不要打脸,嘤嘤嘤~~)送给那些需要的人.可以相互交流,喜欢的加我吧. Wx: Lxp911221 最近发生了一些 ...
解决部分控件，自动获取焦点的情况
简单的描述一下:外层用一个大的,可滚动的view包着内容(有textview.listview.imageview等一个或多个情况下),你每次进入页面时,可能会出现顶部被拉上去了.为啥会这样呢?原因很 ...

input 获取焦点的情况

input 获取焦点的情况相关推荐

最新文章

热门文章