饿了么 <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 ...
随机推荐
- SDK与API的理解
1.SDK SDK (Software Development Kit):软件开发工具包,一般都是软件工程师为特定的软件包.软件框架.硬件平台.操作系统等建立应用软件时的开发工具的集合. SDK (S ...
- JS中字符串的常见属性及方法
1.属性 1.1.length var txt = "abc 123"; console.log(txt.length); 2.方法 2.1.返回字符位置(indexOf()) 该 ...
- python的迭代器(转自廖雪峰老师python基础)
我们已经知道,可以直接作用于for循环的数据类型有以下几种:一类是集合数据类型,如list.tuple.dict.set.str等:一类是generator,包括生成器和带yield的generato ...
- 120、TensorFlow创建计算图(二)
#创建一个计算流图 #大多数tensorflow程序开始于dataflow graph 的构造函数 #在这个命令中你执行了tensorflow api的函数 #创建了新的操作tf.Operation ...
- tfsenflow队列|tf.train.slice_input_producer|tf.train.Coordinator|tf.train.start_queue_runners
#### ''' tf.train.slice_input_producer :定义样本放入文件名队列的方式[迭代次数,是否乱序],但此时文件名队列还没有真正写入数据 slice_input_pr ...
- c++实现哈夫曼树,哈夫曼编码,哈夫曼解码(字符串去重,并统计频率)
#include <iostream> #include <iomanip> #include <string> #include <cstdlib> ...
- 转 用SQL语句,删除掉重复项只保留一条
用SQL语句,删除掉重复项只保留一条 用SQL语句,删除掉重复项只保留一条 在几千条记录里,存在着些相同的记录,如何能用SQL语句,删除掉重复的呢1.查找表中多余的重复记录,重复记录是根据单个字段(p ...
- Java常用的几个Json库,性能强势对比!
作者:飞污熊 https://xncoding.com/2018/01/09/java/jsons.html 本篇通过JMH来测试一下Java中几种常见的JSON解析库的性能.每次都在网上看到别人说什 ...
- docker--数据持久化之Data Volume
使用mysql为例 查看docker hub官方的mysql image 的dockerfile,有这一行:VOLUME /var/lib/mysql -v给volume创建别名 [root@loca ...
- 【原创】微信最新表情js代码
最近在做仿微信聊天表情发送功能,所以需要展示常用的105个表情. 因为对接微信公众号的时候,用户聊天过程中发送的表情,微信服务器会转成对应的代码传给我们的服务器,类似如下: :/::)/::~/::B ...