1.拓展scroll.vue事件

    beforeScroll:{
type:Boolean,
default:false
} if(this.beforeScroll){//滚动列表的时候收起键盘(移动端)
this.scroll.on('beforeScrollStart',()=>{
this.$emit('beforeScroll')
})
}

2.在suggest.vue里声明beforeScrll:true,并$emit(beforeScroll)事件

  beforeScroll(){
this.$emit('beforeScroll')
},

3.在搜索input框中写失去焦点事件:

   blur(){
this.$refs.query.blur()
},

4.在search.vue父组件中调用子组件的blur方法;

 blurInput(){
this.$refs.searchBox.blur()
},

当滚动列表的时候,让input框失去焦点(移动端会收起键盘)的更多相关文章

  1. [TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍

    1. onfocus事件 input框获取到焦点时,触发了该事件,比如获取到焦点时,修改input框的背景色.这个功能其实可以使用css的伪类:focus来定义. 2. onblur事件 这个与onf ...

  2. 事件和方法的区别,以input框的blur事件为例

    1. 我们在原生的js中学到的事件 onblur 2. 使input框失去焦点的方法blur 3. jquery中的方法blur 是当input框失去焦点时触发的回调 三者是不相同的 事件:指的是一个 ...

  3. js-移动端android浏览器中input框被软键盘遮住的问题解决方案

    我遇到的问题:在一个页面里有一个弹出层之前我给我的最外层加了固定定位 用了下面的方法也不好使:没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡: <sect ...

  4. 基于Element-UI的el-table,input框输入实现排序功能

    最终效果如下 实现要求: 如果输入的内容不是非负整数,那么提示报错,并且将值变为输入前的内容: 如果输入正确,则当输入的内容发生改变并且失去焦点以后,触发事件,重新获取列表: 实现思路 使用原生的in ...

  5. 关于点击input框唤醒键盘导致input被遮盖的问题

    关于点击input框唤醒键盘导致input被遮盖的问题 这个问题相信大家在实际开发过程当中都有遇见,我自己也遇见过很多次.之前在百度上看见大多数的方法利用的都是键盘唤醒了之后,页面的实际高度会发生变化 ...

  6. Jquery制作--循环滚动列表

    自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可 ...

  7. input框focus时的美化效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 即时搜索(input框)

    做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下. 即时搜索的方案: (1)change事件    触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标 ...

  9. javascript onblur事件阻塞选中input框

    先上问题实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

随机推荐

  1. nfs的优化

    总结和测试了一下自己的经验: NFS中的rsize.wsize rsize.wsize对于NFS的效能有很大的影响.wsize和rsize设定了SERVER和CLIENT之间往来数据块的大小,这两个参 ...

  2. 73条日常shell命令汇总,总有一条你需要!

    1.检查远程端口是否对bash开放: echo >/dev/tcp/8.8.8.8/53 && echo "open" 2.让进程转入后台: Ctrl + z ...

  3. Git的图形化工具使用教程

    虽然感觉并没有什么暖用,但姑且还是写出来留作纪念好了 Git这种分布式版本控制系统最适合的就是单枪匹马搞开发的选手,不需要服务器,下载个git和图形工具,网速快十分钟就能搞定开始愉快的开发工作.我在搭 ...

  4. Linux下出现command not found的解决办法

    不管是普通用户还是ROOT用户,修改~/.bash_profile文件,在文件最后加上:export PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/u ...

  5. RabbitMQ.Client API (.NET)中文文档

    主要的名称空间,接口和类 核心API中定义接口和类 RabbitMQ.Client 名称空间: 1 using RabbitMQ.Client; 核心API接口和类 IModel :表示一个AMQP ...

  6. 【Struts2】如何查看Struts2框架的源码

    学习三大框架时难免遇到不太理解的地方需要去研究框架源码,这里总结一下查看struts2源码的两种方式. 1.直接解压struts2.X.X-all.zip,在的到的解压文件中看到如下目录: 打开图中蓝 ...

  7. class-dump在osx 10.11以后安装方法

      当Mac升级了OSX 10.11后,配置class-dump的时候,会发现逆向书上推荐的class-dump存放目录/usr/bin,class-dump存放不进去,尝试过用sudo 还是不被允许 ...

  8. NPM Node.js 包管理

    1.NPM 简介 1.1 NPM Node.js® 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,可方便地构建快速,可扩展的网络应用程序的平台.Node.js 使用事件驱动, ...

  9. 解决Android中多次点击(快速点击多次 )启动多个相同界面的问题

    通过以下代码可以解决这个问题. /** * 防止快速点击 * @param ev * @return */ @Override public boolean dispatchTouchEvent(Mo ...

  10. ORA-01917: user or role 'PDB_DBA' does not exist

    在使用seed PDB创建新的PDB的时候,报了以下错误提示: SQL> create pluggable database pdb2 admin user admin1 identified ...