饿了么 <el-input></el-input>输入框获取与失去焦点事件
//1.定义focus事,绑定属性
<el-input
v-model="headerInput"
@focus="onInputFocus"
@blur="onInputBlur":style="thisStyle">
</el-input>
thisStyle:'', //2.获得焦点事件
onInputFocus(){
let self = this;
self.thisStyle="outline: 0;box-shadow: 0px 0px 10px 0px #ffffff;transition: border ease-in-out 0.15s,box-shadow ease-in-out 0.15s;-moz-transition:border ease-in-out 0.15s,box-shadow ease-in-out 0.15s;-webkit-transition:border ease-in-out 0.15s,box-shadow ease-in-out 0.15s;"
}, //3.失去焦点事件
onInputBlur(){
let self = this;
self.thisStyle = "width: 330px;"
},
饿了么 <el-input></el-input>输入框获取与失去焦点事件的更多相关文章
- 让input表单输入框不记录输入过信息的方法
有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input文本输入框会记录下之前提交表单的信息,以后每次只要双击input文本输入框就会出现之前输入的文本,这样有时会觉得比较方 ...
- input输入框获得、失去焦点添加事件
onBlur:当输入框失去焦点后 onFocus:当输入框获得焦点后 这两个JavaScript事件是写在html标签中的例如: <input type="text" onB ...
- HTML 使用CSS 如何去掉文本聚焦框 HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input、textarea输入框placeholder样式
HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input.textarea输入框placeholder样式 兼容性代码: input::-webkit-input ...
- jquery多种方式实现输入框input输入时的onput,onpropertychange,onchange触发事件及区别
有关inputs输入内容的事件监听,一般我们会想到下面几个关键词:onput,onpropertychange,onchange onput与onchange的一个区分 onput:该事件在 < ...
- EL表达式 EL函数 自定义el函数 《黑马程序员_超全面的JavaWeb视频教程vedio》
\JavaWeb视频教程_day12_自定义标签JSTL标签库,java web之设计模式\day12_avi\12.EL入门.avi; EL表达式 1. EL是JSP内置的表达式语言! * jsp2 ...
- input中blur失去焦点事件与点击事件冲突时如何解决
方法一 使用setTimeout $(function(){ $(".cy-name-input input").on({ focus:function() { $(". ...
- 后台拼接input 后,动态获取input的值
//前台 <input id=" /> //后台 string text = request.form["text"].toString();
- jquery input 下拉框(模拟select控件)焦点事件
本章主要讲解如何实现select下拉列表可输入效果 ps:input提供输入,然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul,下面是html基本结构: < ...
- html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。
关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...
随机推荐
- BZOJ 2694: Lcm 莫比乌斯反演 + 积性函数 + 线性筛 + 卡常
求 $\sum_{i=1}^{n}\sum_{j=1}^{m}lcm(i,j)\mu(gcd(i,j))^2$ $\Rightarrow \sum_{d=1}^{n}\mu(d)^2\sum_{i ...
- 【LeetCode 60】第k个排列
题目链接 [题解] 逆康托展开. 考虑康托展开的过程. K = ∑v[i]*(n-i)! 其中v[i]表示在a[i+1..n]中比a[i]小的数字的个数 (也即未出现的数字中它排名第几(从0开始)) ...
- 测开之路三十九:js基础
js的两种使用方式 第一种使用方式:单独写js文件 在static下新建一个js文件并写入内容 alert('这是一个弹窗'); 在html文件里面,用script标签引入 <script sr ...
- xshell设置选中复制,右击粘贴功能
. 设置选中复制: 工具--->选项--->键盘和鼠标--->(然后根据下图设置保存即可) 2. 设置ctrl + v 粘贴功能: 工具--->选项--->键盘和鼠标-- ...
- Process Monitor监控进程操作注册表如何实现?
http://zhidao.baidu.com/link?url=Kqav4qkQSprC5FnpHPOGJvhqvY9fJ9-Vdx9g_SWh4w5VOusdRJo4Vl7qIdrG4LwRJvr ...
- Day 45 Mysql 数据库练习题二
1.表关系 注意:创建表时,根据合理性设置字段的长度和类型. 2.下面:开始你的表演 1.查询所有人员信息 select * from ren 2.只查询人员的姓名和年龄 select name, ...
- servlet-获取web.xml配置的init-param参数
1.web.xml配置的参数 <servlet> <servlet-name>firstServlet</servlet-name> <servlet-cla ...
- kaggle-制作评分卡
https://blog.csdn.net/zpxcod007/article/details/80118580 制作A卡,申请评分卡 数据集:15万个样本,特征 主要预处理手段:缺失值,异常值,样本 ...
- asp.net的处理机制(.ashx/.aspx)
浅谈自己对asp.net 处理机制的图解 图解的内容有点多(包含asp.net 的处理机制和页面生命周期的重要事件,建议小伙伴把图片下载查看可好?) asp.net处理机制解说 当浏览器发送一条请求给 ...
- Windows盘符切换,Dos命令
>>.常用Dos命令 dir 列文件名 deltree 删除目录树 cls 清屏 cd 改变当前目录 copy 拷贝文件 diskcopy 复制磁盘 del 删除文件 format 格式化 ...