VUE 处理文本框获焦点高亮
先贴例子代码 这里又三个div对应的三个input输入框
<!-- 登录的表单 -->
<div class="input_group" :class="{active:act_index===1}">
<label for="cm_code">公司编号:</label>
<input @focus="act_index=1" type="number" id="cm_code" v-model="cm_code">
</div> <div class="input_group" :class="{active:act_index===2}">
<label for="PNO">员工编号:</label>
<input @focus="act_index=2" type="number" id="PNO" v-model="cm_code">
</div> <div class="input_group" :class="{active:act_index===3}">
<label for="Passwd">用户密码:</label>
<input @focus="act_index=3" type="number" id="Passwd" v-model="cm_code">
</div>
一、给需要高亮样式的input绑定样式 :class = "{active:act_index===1}" 这里的act_index 在data中需要设置,默认为1
第一个输入框的act_index为1的时候高亮 第二个act_index为2的时候高亮 以此类推 所以只需要控制 act_index 的值就行
export default {
data () {
return {
act_index:1,
cm_code:""
};
}
}
2、可以选择点击事件 @click 去控制点击时候的 高亮,但是无法用电脑使用Tab 控制上下换行高亮
所以这里推荐使用 @focus 可以获取焦点 这样在电脑上使用Tab 控制上下换行的时候 就可以高亮了
VUE 处理文本框获焦点高亮的更多相关文章
- JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点
今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了, Jav ...
- jQuery 使得文本框获得焦点
今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用jQuery的话 是不是对象.focus()就可以了, 可是 ...
- javascript当文本框获得焦点设置边框
javascript当文本框获得焦点设置边框:本章节介绍一下当文本框获得焦点以后如何设置文本框的边框样式,本来是一个非常简单的问题,但是有可能前台美工人员对javascript并不是太了解,所以还是通 ...
- jQuery 文本框得失焦点应用
一.文本框得失焦点一种是改变文本框的样式 得到焦点: 失去焦点: 二.文本框得失焦点另一种是改变文本框的值 得到焦点: 失去焦点: 三.jQ ...
- Easyui中 messager.alert 后某文本框获得焦点
messager.alert 后某文本框获得焦点 $.messager.alert({ title:'消息', msg:'电话号码 只能是数字!', icon: 'info', width: 300, ...
- CodeMirror编辑器文本框Textarea代码高亮插件,CodeMirror的简单实用例子
CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项 ...
- JQuery初始加载时注册文本框失去焦点事件
在JQuery初始加载时注册文本框失去焦点事件 $(function(){ $('#文本框ID').blur(function(){ //对文本框内容进行处理 }); });
- jQuery之文本框得失焦点
版本一 css代码部分: .focus { border: 1px solid #f00; background: #fcc; } 当焦点获得时,添加focus样式,添加边框,并改背景色为#fcc h ...
- easyUI文本框获得焦点,失去焦点
easyUI帮助文档对于文本框的操作没有提供直接获得焦点,或者失去焦点的方法,我们可以采用以下写法来实现. 获得焦点: $('input',$('#文本框Id').next('span')).focu ...
随机推荐
- SQLite事务、错误与自动回滚
BEGIN TRANSACTION begin-stmt: hide commit-stmt: hide rollback-stmt: hide No changes can be made to t ...
- Python打包—Pyinstaller
2018-09-27 21:12:05 一 前言 在windows平台学习python的过程中,你肯定会遇到需要把.py脚本打包成.exe的情形,如此,至少有两方面的好处:第一,你的代码保密性更好 ...
- ssm框架的整合搭建(二)
maven简单项目的创建前面已经完成了,下面开始依赖包和配置文件的编写 好好努力每一天!!!!!! 项目结构看这里 1.首先,依赖包pom.xml <project xmlns="ht ...
- 定义静态map
public final static Map<String, String> header = new HashMap<String, String>(); static { ...
- 10 python 初学(Python 的编码解码)
Python 2 : ASCII Python 3 :Unicode
- C语言数组求长度
1.创建数组 ,,,,};/*创建一个int型数组,数组的长度为5*/ 2.利用sizeof求一维数组长度 int len; len = sizeof(a)/sizeof(int); Δ以上求数组长度 ...
- Java多线程学习(二)---线程创建方式
线程创建方式 摘要: 1. 通过继承Thread类来创建并启动多线程的方式 2. 通过实现Runnable接口来创建并启动线程的方式 3. 通过实现Callable接口来创建并启动线程的方式 4. 总 ...
- 简单的自定义ViewGroup
自定义ViewGroup需要重写onMeasure, onLayout等方法.下面是一个实例,4个View分别显示在四个角. public class MyGroup extends ViewGrou ...
- My ajaxwrapper tool
Until recently, when I write ajax call, always write like below: $.ajax({ type: "post", da ...
- 图解Redis之数据结构篇——字典
前言 字典在Redis中的应用非常广泛,数据库与哈希对象的底层实现就是字典. 系列文章 图解Redis之数据结构篇--简单动态字符串SDS 图解Redis之数据结构篇--链表 图解Redis之 ...