饿了么 <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 ...
随机推荐
- 网络协议之mDNS
DNS(Domain Name System,域名系统)因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串.通过主机名,最终得 ...
- Linux Bash Shell快速入门 (三)
forfor 循环结构与 C 语言中有所不同,在 BASH 中 for 循环的基本结构是: for $var in dostatmentsdone 其中 $var 是循环控制变量, 是 $var 需要 ...
- 颁发不受浏览器信任的SSL证书
xshell登录服务器,使用openssl生成RSA密钥及证书 # 生成一个RSA密钥 $ openssl genrsa -des3 -out tfjybj.key 1024 # 生成一个证书请求$ ...
- 二次封装arcgis的timeslider
arcgis的timeslider是对dojo slider二次封装,项目需要,所有Map用统一样式的slider,所以写了一个common的dojo class,统一调用生成slider,作为对ti ...
- linux: 如何查看端口占用?
查看端口占用 $: netstat -anp | grep 8888 tcp 0 0 127.0.0.1:8888 0.0.0.0:* LISTEN 13404/python3 tcp 0 1 172 ...
- FileInputStream_FileOutputStream
Writer的基本方法 //向输出流中写入一个字符数据,该字节数据为参数b的低16位 void write(int c) throws IOException //将一个字符类型的数组中的数据写入输出 ...
- Redis 系列
Redis 系列 [Redis 系列(01)安装配制] [Redis 系列(02)数据结构] [Redis 系列(03-1)进阶 - 发布订阅] [Redis 系列(03-2)进阶 - 事务] [Re ...
- UVALive 4992 Jungle Outpost(半平面交判存)
Jungle Outpost Time limit: 15.000 seconds Description There is a military base lost deep in the jung ...
- 新手学习 React 迷惑的点
网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打 ...
- Java开发中的23种设计模式详解(3)行为型
本章是关于设计模式的最后一讲,会讲到第三种设计模式--行为型模式,共11种:策略模式.模板方法模式.观察者模式.迭代子模式.责任链模式.命令模式.备忘录模式.状态模式.访问者模式.中介者模式.解释器模 ...