//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. NAGIOS(网络监视工具)

    Nagios是一款开源的免费网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机,路由器等网络设备,打印机等.在系统或服务状态异常时发出邮件或短信报警第一时间通知网站运维人员 ...

  2. Shorten IPv6 Address

    题目链接 题意:转换一个128位的二进制串,变成16进制,并且格式为x:x:x:x:x:x:x:x然后多个相邻的0变成::,且只有一个::,求变成的字典序最小且最短的字符串. 思路:大水题,但是就是一 ...

  3. Workflow:Workflow 百科

    ylbtech-Workflow:Workflow 百科 工作流(Workflow),指“业务过程的部分或整体在计算机应用环境下的自动化”.是对工作流程及其各操作步骤之间业务规则的抽象.概括描述.在计 ...

  4. websocket 和 http的区别

    相同点: 都是基于tcp实现的,都要经过三次握手.四次挥手. 如图: 不同点: websocket 经历过连接,就可以全双工通信,不需要一直连接,降低了网络资源消耗. http 每次通讯都要连接,客户 ...

  5. java String 类特点

    String的设计是一个典型的单一模式 String str1="AAAA":String str2="AAAA": 这生成两个对象吗?不是.在内存中,这是同一 ...

  6. Linux查看文件大小5个常用命令

    1. 前言 Linux 系统有非常好用的命令,功能也非常丰富,如果你对命令行工具熟悉,可以非常高效率完成维护工具.本文主要介绍Linux系统中,用于查看文件大小的命令. Linux 查看文件大小5个常 ...

  7. Django 登录验证码

    url.py: url(r'^verifycode/$',views.verifycode), url(r'^verifycodefile/$',views.verifycodefile), url( ...

  8. fiddler 暂停抓包

    或者点击左下角 capturing

  9. 厉害了,Java EE 再次更名为 Jakarta EE

    来自:开源中国 https://www.oschina.net/news/108108/java-ee-rename-as-jakarta-ee Eclipse基金会最近对 Java EE 标准的每个 ...

  10. PHP 算式验证码

    这里不多说,直接上代码! /** * 改造的加减法验证类 * 使用示例 VerifyCode::get('xxx', 20); * 验证示例 VerifyCode::check('1', 'xxx') ...