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 ...
随机推荐
- python 列表 元祖
# # 1,写代码,有如下列列表,按照要求实现每⼀一个功能li = ["alex", "WuSir", "ritian", "ba ...
- 如何征服面试官,拿到Offer [转]
转自 https://my.oschina.net/cccyb/blog/3012768 又到了茶余饭后的时间,想想写点什么,掐指一算,噢呦,快到3月份了,职场的金三银四跳槽季又来了,不同的是今年比往 ...
- ASP.NET API Helper Page 创建并生成相关帮助文档
创建API项目 修改原工程文件,该行为是为了避免和引入第三方API工程文件冲突 修改发布设置 引入需要生成文档的相关文件,将第三方API依赖的相关文件(XML文件非常重要,是注释显示的关键),复制到文 ...
- [SHOI2015]超能粒子炮·改
嘟嘟嘟 先看了一遍lucas,还是只能拿50分(似乎已经满足了). 正解当然还是看某个大佬的啦. 我们要求的就是 \[f(n, k) = \sum _ {i = 0} ^ {k} C _ {n} ^ ...
- hash_hmac 签名
<?php /** * =========================================================== * Model_Base * Descriptio ...
- freopen
一定要记住哇 求求你了 记住吧 freopen("balabala.in","r",stdin); freopen("balabala.out&quo ...
- postman简介及基本用法
从分层测试角度来说,接口测试是相对来说性价比最高的,且作为功能测试进阶的必备技能,接口测试值得大家都去学习掌握. 工欲善其事,必先利其器,好的工具能更好的帮助工程师更高效率的完成工作. 常见的接口测试 ...
- Nginx+IIS简单的部署
随着互联网项目用户访问量不断上升,单点web服务器是无法满足大型高并发高负载的业务处理的,为了给web服务器做负载均衡方案,打算采用Nginx搭建负载均衡服务器,把用户请求分配到N个服务器来缓解服务器 ...
- element-ui中 table表格hover 修改背景色
增加样式级别就行啦 .el-table--enable-row-hover .el-table__body tr:hover>td{ background-color: #212e3e !i ...
- 从一个例子入门Mysql储存过程
例子 -- 秒杀执行存储过程 DELIMITER $$ -- 将分隔符; 转换为 $$ -- 定义存储过程 -- 参数: in 输入参数; out 输出参数 -- row_count():返回上一条修 ...