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

1.拓展scroll.vue事件

 1    beforeScroll:{
 2          type:Boolean,
 3          default:false
 4         }
 5
 6
 7   if(this.beforeScroll){//滚动列表的时候收起键盘(移动端)
 8             this.scroll.on(‘beforeScrollStart‘,()=>{
 9               this.$emit(‘beforeScroll‘)
10             })
11           }

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

1  beforeScroll(){
2           this.$emit(‘beforeScroll‘)
3         },

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

1   blur(){
2             this.$refs.query.blur()
3           },

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

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

原文地址:https://www.cnblogs.com/yangguoe/p/9474836.html

时间: 2024-11-05 22:56:25

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

js获取所有的input框元素 给某个input框家焦点事件

@keyup.native="tdItem.onKeyUp($event, trItem, trIndex)" (item , row , index) // 获取所有input let inputAll = document.querySelectorAll('.table_input input'); // 向上键盘 =38 if (item.keyCode === 38) { newIndex -= 1; if (inputAll[newIndex]) { inputAll[ne

实现input框实时监听

一.大概有三种方法: 1.onchange() 2.oninput() 3.onpropertychange() 二.onchange() 该事件监听input的value是否改变,但需要注意只在input框失去焦点时触发,在ie.chrome.firefox等浏览器中都有效. 三.oninput() & onpropertychange() 要是你想只要input框的值发生改变,并不需要失去焦点就能触发,那么这对好基友就是你所需要的. oninput() & onpropertychan

判断input框是否为空

需求: 当input框失去焦点时:判断,如果输入框内容为空则获取焦点:否则弹出输入框的内容. <!DOCTYPE html> <html> <head> <title>判断input是否为空</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <bo

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

1. onfocus事件 input框获取到焦点时,触发了该事件,比如获取到焦点时,修改input框的背景色.这个功能其实可以使用css的伪类:focus来定义. 2. onblur事件 这个与onfocus事件想法,当input框失去焦点时,触发该事件,比如将输入的文本,统一修改为小写 3. onchange事件 这个事件的发生需要具有2个条件: 失去焦点 内容发生了变化 4. oninput事件 这个时HTML5新加入的事件,IE9之前是不支持的,在IE9之前使用的是: onproperty

input框在ios和android的适配问题

问题1:input框获取焦点弹出键盘后iOS无法输入文字 解决:css中加上   -webkit-user-select:text !important; 问题2: 获取焦点时的光标IOS颜色和输入文字颜色不一致 解决:手动设置颜色:caret-color: #952BF7; 问题3: input框获取焦点时,IOS手机页面被键盘抬起,键盘落下后,页面未回弹 解决:在input框失去焦点时,调用window.scrollTo方法手动将页面滚回原来的位置,这里以vue项目为例 问题4: 当底部有吸

Cocos2d-x滚动列表具体解释(CCScrollView的使用)

今天要写一个滚动列表功能,类似以下这样.(图片资源都是自己从天天酷跑里面抠的,仅用于学习方便) 首先,这样一个列表就和iOS里面的UITableView没什么两样,当然,Android中肯定也存在类似的控件. 在cocos2d-x引擎中參照ios中的UITableView实现了一个叫做CCTableView的类,用于创建列表,对于熟悉ios程序设计的人来说,这个内容应该是非常好理解的. 以下就介绍下CCTableView. 首先,mark几个比較好的博文. Cocos2d-x CCTableVi

关于input框的兼容性问题

在H5横行的移动互联网时代中,兼容性的问题往往被大家所遗忘.可以说微软都已经放弃了IE,自然大家也都不是特别关心这些问题.但是客户却不会这么想,因为使用浏览器,浏览网站的人,太多了,以至于甚至于有人使用xp系统,ie6这样的低端版本.为了给用户更好的体验,我们只有选择迁就. 废话说了不少了,下面进入正题. 最近在项目中遇到input框的兼容性问题,经过多方实验,最终解决,特地记下来,以备以后查看,同时方便大家解决问题. 正常input框的css样式,例如: input{display:block

在滚动列表中实现视频的播放(ListView &amp; RecyclerView)

英文原文:Implementing video playback in a scrolled list (ListView & RecyclerView) 本文将讲解如何在列表中实现视频播放.类似于诸如 Facebook, Instagram 或者 Magisto这些热门应用的效果: Facebook: Magisto: Instagram: 这片文章基于开源项目: VideoPlayerManager. 所有的代码和示例都在那里.本文将跳过许多东西.因此如果你要真正理解它是如何工作的,最好下载

浅谈asp.net通过本机cookie仿百度(google)实现搜索input框自动弹出搜索提示

对于通过用户输入关键词实现自动弹出相关搜索结果,这里本人给两种解决方案,用于两种不同的情形. 常见方法是在数据库里建一个用户搜索关系表,然后通过用户搜索框输入的关键字异步调用数据表中的相关数据,显示在一个隐藏div中. 第二种方式也就是我现在着重讨论的方式,适用于单个用户,基于此用户以往的搜索数据来实现搜索提示功能.技术关键是记录下用户的以往搜索数据,写入cookie,然后页面从用户本机cookie调用数据. ok,下面进入正题.本文主要讲实现步骤,代码可根据自己实际需要更改. 一,如何写入co