饿了么 <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 ...
随机推荐
- vue项目git
https://github.com/renrenio/renren-fast-vue https://github.com/hzlshen/vue-project
- [bzoj3462]DZY Loves Math II (美妙数学+背包dp)
Description Input 第一行,两个正整数 S 和 q,q 表示询问数量. 接下来 q 行,每行一个正整数 n. Output 输出共 q 行,分别为每个询问的答案. Sample Inp ...
- docstoc对Scribd的威胁比SlideShare还要大。
docstoc,这是在TechCrunch40互联网交流会上崭露头角的个性化服务.docstoc为用户提供了在线存储.分享以及交流文档的互联网服务.与Scribd相同的是,除了文档分享功能以外,doc ...
- 测开之路四十五:Django之最小程序
安装Django库 Django最小程序 import sysfrom django.conf.urls import urlfrom django.conf import settingsfrom ...
- MongoDB拥有SSD秒杀高富帅使用过程分享
[IT168现场报道]2013年4月18-20日,第四届中国数据库技术大会(DTCC 2013)在北京福朋喜来登酒店拉开序幕.在为期三天的会议中,大会将围绕大数据应用.数据架构.数据管理(数据治理). ...
- vector的自定义实现
#pragma warning(disable:4996) #include<iostream> #include<string> #include<vector> ...
- /usr/bin/python^M: bad interpreter: No such file or dir解决办法
Linux直接./xx.py执行python脚本时报错 修改脚本文件编码 $vi xx.py $set ff=unix $:wq
- LINUX查看服务器硬件配置(转)
LINUX查看硬件配置 1. 查看所有硬件的型号 dmidecode | more # dmidecode 2.2 SMBIOS 2.5 present. 170 structures oc ...
- springCloud的使用04-----熔断器hystrix的使用
1. restTemplate+ribbon使用hystrix 1.1 引入依赖 <!-- 配置hystrix断路器 --> <dependency> <groupId& ...
- Yii 1.1 cookie删不掉
我的cookie是这样设置的: $cookie = new CHttpCookie('username','Jack'); $cookie->expire = time()+60*60*24*3 ...