问题描述

im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验。


bug图


解决方法:

html:
  <input type="text" v-model="msg" maxlength="500" ref="inputShow" @click="inputShow" />
js:

setTimeout(()=>{
  this.$refs.inputShow.scrollIntoView();
  document.body.scrollTop = document.body.scrollHeight;
},100)

问题描述

  在IOS键盘点击发送并不会执行按钮事件

解决方法

1、在 mounted 生命周期里面 加一个全局事件监听

    document.body.addEventListener('focusout', () => {
//软键盘关闭事件 }) 2、给input加失去焦点事件

记录走过的路,踩过的坑,互勉。

  前端交流群:87709616

有不同意见的可以留言,我们一起讨论。

【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件的更多相关文章

  1. 移动端页面中点击input输入框的时候弹出的键盘将输入框挡住的问题

    使用的是vux框架, 以为是框架问题, 后来发现是把当前页面的高度写死为了height:200%: 只要把高度去掉就能让页面自动弹到输入框的上方:

  2. Xcode6.1模拟器ios8.1模拟器不能弹出虚拟键盘及虚拟键盘无法切换中文输入的解决办法

    1.不能弹出虚拟键盘的解决办法 模拟器菜单Hardware->Keyboard->Connect Hardware Keyboard取消选中,快捷键commad+shift+K 2.虚拟键 ...

  3. AppCompatActivity 去掉标题栏和EditText弹出软键盘遮住输入框问题

    1. AppCompatActivity去掉标题栏 此处除掉标题栏,需要注意一点,AppCompactActivity是继承自Activity.然而,AppCompactActivity据查看网上资料 ...

  4. IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input

    移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题! 1.页面没有点击底部input的初始状态 2.安卓手 ...

  5. 解决在IE里预览时弹出:为了有利于保护安全性......

    用Dreamweaver做网页,在IE里预览时弹出这个:为了有利于保护安全性,Internet Explorer 已限制此网页运行可以访问计算机的脚本或ActiveX控件. 在页面顶部加段代码就可以了 ...

  6. 解决eclipse中运行web项目时弹出的"Port 8080 required by Tomcat 9.0 Server at localhost is already in use...

    1.tomcat默认端口是8080,可以修改通过tomcat的端口 修改tomcat\conf\server.xml     结果运行程序,还是报"Port 8080 required by ...

  7. 移动端 输入框 input 被弹出来的键盘 挡住

    给被挡住的input或者textarea加一个id,然后在click事件里调用下面的代码 document.querySelector('#xxx').scrollIntoView();

  8. iOS 解决键盘挡住输入框的问题

    iOS开发中经常会用到输入框UITextField,所以也常会遇到键盘挡住输入框而看不到输入框的内容. 在这里记录一种方法,用UITextField的代理来实现View的上移来解决这个问题. 首先设置 ...

  9. h5软键盘挡住输入框问题解决(android)

    问题 移动端浏览器中的表单在部分android机型上测试,点击靠下的输入框时会遇到弹出的软键盘挡住输入框问题 ios可自身弹起(ios自身的调整偶尔也会出问题,例如第三方键盘会遮挡,原因是第三方输入法 ...

随机推荐

  1. [idea]idea配置Jrebel 标签: ideatomcatjrebel 2017-03-14 09:23 547人阅读 评论(21

    上篇博客讲了如何为idea设置tomcat,这篇博客要给大家推荐Jrebel,其实eclipse上也可以配置Jrebel,但是在使用eclipse的时候并没有发现这些东西,还是习惯使然,对一个比较熟悉 ...

  2. Python内存机制简介

    1: 变量不是盒子,应该把变量视作便利贴.变量只不过是标注,所以无法阻止为对象贴上多个标注.标注就是别名: >>> a = [1, 2, 3] >>> b = a ...

  3. 1-1.go开发工具安装

    (1) (2) bin:go的可执行文件 src:go的源代码 (3)安装开发工具 安装:goland-2018.1.1.exe 将.jar文件复制到工具的bin目录下   用记事本打开“goland ...

  4. Python基础:11变量作用域和闭包

    一:变量作用域 变量可以是局部域或者全局域.定义在函数内的变量有局部作用域,在一个模块中最高级别的变量有全局作用域. 全局变量的一个特征是除非被删除掉,否则它们的存活到脚本运行结束,且对于所有的函数, ...

  5. Linux Shell 教程

    Shell 教程 Shell 是一个C语言编写的程序,他是用户使用Linux的桥梁,Shell 既是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序,这个应用程序提供了一个界面用户通 ...

  6. list extend 和 append

    append 一次追加一个列表 extend 一次追加所有的元素 单个的形式加入

  7. LRJ-Example-06-17-Uva10562

    main() 函数中的这两行 fgets(buf[0], maxn, stdin); sscanf(buf[0], "%d", &T); 不能简单替换为 scanf(&qu ...

  8. 使用提示(Hints)

    对于表的访问,可以使用两种Hints. FULL 和 ROWID FULL hint 告诉ORACLE使用全表扫描的方式访问指定表. 例如: SELECT /*+ FULL(EMP) */ * FRO ...

  9. docker 使用总结

    docker run asn@hadoop1:~/Desktop$ docker run --help Usage: docker run [OPTIONS] IMAGE [COMMAND] [ARG ...

  10. SuperSocket 中的日志系统

    当 SuperSocket boostrap 启动时,日志系统将会自动启动. 所以你无须创建自己的日志工具,最好直接使用SuperSocket内置的日志功能. SuperSocket 默认使用log4 ...