//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>输入框获取与失去焦点事件的更多相关文章

  1. 让input表单输入框不记录输入过信息的方法

    有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input文本输入框会记录下之前提交表单的信息,以后每次只要双击input文本输入框就会出现之前输入的文本,这样有时会觉得比较方 ...

  2. input输入框获得、失去焦点添加事件

    onBlur:当输入框失去焦点后 onFocus:当输入框获得焦点后 这两个JavaScript事件是写在html标签中的例如: <input type="text" onB ...

  3. HTML 使用CSS 如何去掉文本聚焦框 HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input、textarea输入框placeholder样式

    HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input.textarea输入框placeholder样式  兼容性代码: input::-webkit-input ...

  4. jquery多种方式实现输入框input输入时的onput,onpropertychange,onchange触发事件及区别

    有关inputs输入内容的事件监听,一般我们会想到下面几个关键词:onput,onpropertychange,onchange onput与onchange的一个区分 onput:该事件在 < ...

  5. EL表达式 EL函数 自定义el函数 《黑马程序员_超全面的JavaWeb视频教程vedio》

    \JavaWeb视频教程_day12_自定义标签JSTL标签库,java web之设计模式\day12_avi\12.EL入门.avi; EL表达式 1. EL是JSP内置的表达式语言! * jsp2 ...

  6. input中blur失去焦点事件与点击事件冲突时如何解决

    方法一 使用setTimeout $(function(){ $(".cy-name-input input").on({ focus:function() { $(". ...

  7. 后台拼接input 后,动态获取input的值

    //前台 <input id=" /> //后台 string text = request.form["text"].toString();

  8. jquery input 下拉框(模拟select控件)焦点事件

    本章主要讲解如何实现select下拉列表可输入效果 ps:input提供输入,然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul,下面是html基本结构: < ...

  9. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

随机推荐

  1. APIO2019 练习赛 Wedding cake——思路+高精度

    题目大意: 给 n ( n<=1e5 ) 个数 \( a_i \) (\( a_i \) <=1e5),需要构造 n 个实数使得它们的和是 1 ,并且第 i 个实数必须小数点后恰好有 \( ...

  2. win7NVIDIA显卡驱动升级时卡住

    可以先装上.NET framework,再更新就不会卡了

  3. LintCode之删除排序链表中的重复元素

    题目描述: 我的代码: /** * Definition for ListNode * public class ListNode { * int val; * ListNode next; * Li ...

  4. get the deadlock information from sql server

    https://stackoverflow.com/questions/12422986/sql-query-to-get-the-deadlocks-in-sql-server-2008 You c ...

  5. jmeter添加自定义扩展函数之图片base64

    原文连接:---------https://www.cnblogs.com/qiaoyeye/p/7218770.html----------- 打开eclipse,新建maven工程,在pom中引用 ...

  6. git配置密钥(私钥、ssh、公钥)

    参照: https://blog.csdn.net/weixin_42063071/article/details/80999690 经常帮人配置git的私钥,来总结一下简单的流程真心希望对大家有所帮 ...

  7. 测开之路四十二:常用的jquery事件

    $(‘selector’).click() 触发点击事件$(‘selector’).click(function) 添加点击事件$(‘selector’).dbclick() 触发双击事件$(‘sel ...

  8. 如何使用iText制作中文PDF

    1. 下载itextpdf.jar 基础包:http://jaist.dl.sourceforge.net/project/itext/iText/iText5.5.2/itext-5.5.2.zip ...

  9. Selenium:火狐Try Xpath插件替代Firebug和Firepath

    什么是Xpath? XPath是XML的路径语言,通俗一点讲就是通过元素的路径来查找到这个标签元素. 工具 Xpath的练习建议大家安装火狐浏览器后,下载插件,try path. 在Selenium中 ...

  10. Cocos2d-x之Map<K, V>

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. Map<K, V>是Cocos2d-x 3.0x中推出的字典容器,它也能容纳Ref类型.Map<K,V>是模仿C+ ...