inputNextFocus vue - js 跳转 下一个 tab
inputNextFocus vue - js 跳转 下一个 tab
<template>
<Input v-model="val1"
ref="inputBmRef"
:class="val1.toUpperCase() === answer ? 'md-checkbox-outline' : 'md-code'"
:prefix="val1.toUpperCase() === answer ? 'md-checkbox-outline' : 'md-code'"
:style="{width: this.answer.length * 15 + 15 + 30 + 'px',
}" />
</template>
<script>
export default {
name: 'InputBm',
props: {
answer: {
type: String,
default: '',
},
},
components: {},
data () {
return {
val1: ''
}
},
watch: {
val1 (val) {
if (val.toUpperCase() === this.answer) {
this.inputNextFocus()
}
},
},
computed: {},
methods: {
inputNextFocus () {
const thisInput = this.$refs.inputBmRef.$el.getElementsByTagName('input')[0]
const inputs = document.getElementsByTagName("input")
for (var i = 0; i < inputs.length; i++) {
if (inputs[i] === thisInput) {
// console.info('找到啦!')
const tIndex = i + 1
if (tIndex < inputs.length - 1) { // 不是最后一个 就跳下一个 - 最后一个就不跳了
inputs[tIndex].focus()
break
}
}
}
},
},
created () { },
activated () { },
mounted () { },
beforeDestroy () { }
}
</script>
<style>
.md-checkbox-outline input {
background-color: #ace7a8;
}
</style>
inputNextFocus vue - js 跳转 下一个 tab的更多相关文章
- js input框输入1位数字后自动跳到下一个input框聚焦
// input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); f ...
- C#按回车Enter使输入焦点自动跳到下一个TextBox的方法收集
在录入界面中,用户往往需要按回车键时光标自动跳入下一个文本框,以方便录入操作.在C#中实现该功能有多种方法,以下是小编收集的不使用TAB键,而直接用回车键将光标转到下一个文本框的实现方法. 一.利用W ...
- 解决iPhone上select时常失去焦点,随意跳到下一个输入框,影响用户操作
window.addEventListener('load', function() { FastClick.attach(document.body); }, false); //300s延迟,解决 ...
- 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。
要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...
- 回车跳到下一个EDIT
1.按下方法procedure TForm2.Edit1KeyDown(Sender: TObject; var Key: Word; Shift: TShiftState);begin if Key ...
- input text输完自动跳到下一个
应用场景: 短信验证码输入 效果: input输入框,输入完以后自动跳转到下一个 思路: 四个输入框 进入聚焦到第一个输入框 第一个输入框输完一个字符后自动聚焦到下一个输入框 1.四个输入框 < ...
- 010——MATLAB运行错误跳到下一个循环
(一)MATLAB运行错误跳到下一个循环 :%文件的个数 try %运行的程序放到这里 catch continue%假如上面的没法执行则执行continue,到下个循环 end
- 【vue.js】windows下安装vue.js
windows下搭建vue开发环境 Vue.js是一套构建用户界面的 “渐进式框架”.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常 ...
- 搭建Vue.js环境,建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
- 用Vue.js递归组件构建一个可折叠的树形菜单
在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself! ...
随机推荐
- DataSet类型转换实体
查询DataSet类型无法对每条数据进行循环转换,利用泛型对象使用反射机制将对象相关属性进行自动赋值. 基础调用 DataSet ds = DbHelper.Query(SQL); if (ds.Ta ...
- T406696 『STA - R4』冰红茶 题解
题目链接:冰红茶 比较有意思的套路题(前提是接触过) 首先,一个最基本的线段树包含两种操作的板子要会,分别为区间赋值与区间加,同时维护区间最值.这个挺简单的,区间赋值优先级高于区间加,可以将区间加覆盖 ...
- 基于IO端口检测虚拟机
通过执行特权指令探测 Vmware: 因为在虚拟机中指定功能号 0xa 则会从指定端口获取虚拟机版本信息到指定的目的操作数地址: 另外 0x14 则是获取虚拟机内存大小,当获取的值大于0说明在虚拟机中 ...
- maven 私服 500 错误 nexus
扩大了硬盘就好了
- Rancher 2.x 安装
Rancher 是一个容器管理平台.Rancher 简化了使用 Kubernetes 的流程. 下面记录一下手动安装Rancher的步骤 1. 部署 Rancher Server 执行以下命令即可( ...
- CSS实现渐隐渐现效果
CSS实现渐隐渐现效果 实现渐隐渐现效果是比较常见的一种交互方式,通常的做法是控制display属性值在none和其它值之间切换,虽说功能可以实现,但是效果略显生硬,所以会有这样的需求--希望元素消失 ...
- Springboot实现remember-me记住我功能
1.什么是remeber-me? remeber-me即记住我功能,是我们在登录web系统时的常见勾选项.当我们登录一个web系统时除了输入常规的用户名.密码后还可以勾选记住我选项(假设该系统提供了该 ...
- Vue+ElementUI实现用户管理前后分离实战二:API接口篇
项目介绍 上一篇介绍了前端相关实现代码和效果,本篇则介绍后端接口API如何实现. :) 上一篇地址: https://blog.csdn.net/IndexMan/article/details/11 ...
- Mysql一张表可以存储多少数据
Mysql一张表可以存储多少数据 在操作系统中,我们知道为了跟磁盘交互,内存也是分页的,一页大小4KB.同样的在MySQL中为了提高吞吐率,数据也是分页的,不过MySQL的数据页大小是16KB.(确切 ...
- win32-读取控制台中所有的字符串
我们可以先读取字符串所占的行数,再乘以控制台的实际宽度 bool ReadFromConsole() { HANDLE hConsole = GetStdHandle(STD_OUTPUT_HANDL ...