button按钮被输入法顶起来,遮盖了input输入框
在做手机端的表单提交的时候,在chrome浏览器调试的时候,忘记输入法会引起布局的问题。在webApp里input输入框,会自动调起输入法,但是输入法会改变浏览器的可视区域的大小。就是会把浏览器可视区域的内容变小,因为输入法要占地方。一开始不知道怎么解决了,查了写资料,网上说是监控resize,当页面发生变化的时候,会触发该事件;哈哈,这就好办了...
开始按钮的显示是这样的, 在填写银行账号的时候,还会影响文本框的输入...
因为我使用的是vue2.x,那么就在mounted钩子函数里监听该事件:
btnShow 实在data里声明的变量,默认是true(其实也可以动态改变 :style 来隐藏或显示,也可以设置z-index=-1来改变按钮的显示状态);当监控的resize发生变化的时候,实时的获取浏览器的高度(newHigh);在和这个页面的实际高度(oldHigh)对比,如果 newHigh 小于 oldHigh 说明浏览器的高度被输入法遮挡了一部分;这个时候,可以让button隐藏;反之显示;
实现的效果如下:
基本实现了自己的需求...
button按钮被输入法顶起来,遮盖了input输入框的更多相关文章
- VUE实现Studio管理后台(十三):按钮点选输入控件,input输入框系列
按钮点选输入,是一个非常简单的控件,20分钟就能完成的一个控件.先看效果: 根据以前的设定,通过json数据动态生成这两个按钮,示例中这两个按钮对应的json代码: { label:'标题', val ...
- 勾选checkbox之后,button按钮可用
js:function chkClick() { if (document.getElementById("chkBox").checked == true) { ...
- button 按钮,结合onclick事件,验证和提交表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何在MFC界面开发中响应Button按钮的Down和Up事件
通过尝试有两种方案可以解决这个问题,第一种方案是通过PreTranslateMessage函数在调度消息之前对消息类型进行筛选,第二种方案是重载CButton类,在重载后的类CForTestButto ...
- 遭遇input与button按钮背景图失效不显示的解决办法
笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...
- button按钮
button按钮只加类名不加type时,点击此按钮页面会刷新
- Unity3D NGUI 给button按钮添加单间事件
Unity3D中, NGUI 给button按钮添加单间事件的方法很多,在这里只给推荐一种比较常用的方法. 推荐方法:使用UIListener. 1.给button组价添加上UIListener.选择 ...
- iphone中button按钮显示为圆形解决
iphone中button按钮显示为圆形解决: 添加样式: -webkit-appearance:button; 如果需要为直角: border-radius:0 在源码中添加如:style=&quo ...
- 【html】button按钮的一些问题
问题: button 按钮在不设置 type 属性时,在不同的浏览器作用不一样.举个例子: html: <!doctype html> <html lang="en&quo ...
随机推荐
- Android-Java-进程与线程
1.进程:什么是进程: Mac操作系统,Windows操作系统 ...... 等等,都是由多个进程来运行(系统进程,普通进程,等) 操作系统最小的控制单元是进程,一个应用就是一个进程 进程 全称为:操 ...
- 【转】WinRT 中SystemTrigger 构造函数的 SystemTriggerType 参数的解释
中文版:http://msdn.microsoft.com/library/windows/apps/windows.applicationmodel.background.systemtrigger ...
- Linq的基本用用法
Linq 的基本用法: Sort , OrderBy, Skip,Take,Where,Compare,Join,Distinct ,InsertRange 等关键词 Select用法 var sel ...
- Regex Golf练习笔记(1)
正则表达式进阶练习:https://alf.nu/RegexGolf (此练习笔记) 正则表达式验证:https://regexr.com/ (1) (2) 注释:每个词的三个字母在后面重复出现了一 ...
- nginx优化笔记(keepalive、https等)
一.nginx之tcp_nopush.tcp_nodelay.sendfile 1.TCP_NODELAY你怎么可以强制 socket 在它的缓冲区里发送数据?一个解决方案是 TCP 堆栈的 TCP_ ...
- dorado-TabControl
1.TabControl控件有点类似于.net中TableControl控件 2.常用属性 2.1 currentTab页面加载时,默认打开第几个tab,从0开始 2.2 shouMenuButton ...
- log Log4NET配置
Log4Net是用来记录日志的,可以将程序运行过程中的信息输出到一些地方(文件.数据库.EventLog等),日志就是程序的黑匣子,可以通过 日志查看系统的运行过程,从而发现系统的问题.日志的作用:将 ...
- Java中的String,StringBuilder,StringBuffer的区别
这三个类之间的区别主要是在两个方面,即运行速度和线程安全这两方面. 首先说运行速度,或者说是执行速度,在这方面运行速度快慢为:StringBuilder > StringBuffer > ...
- Spring 开发第一步(二)
今天继续学习<Spring in action 3rd>并运行书中的例子,到了第4章aop,是加入一个作为切面的Audience类,将Performer的perform()方法作为切点来进 ...
- 学习《精通数据科学从线性回归到深度学习》PDF+代码分析
数据科学内容广泛,涉及到统计分析.机器学习以及计算机科学三方面的知识和技能.学习数据科学,推荐学习<精通数据科学从线性回归到深度学习>. 针对技术书籍,最好的阅读方法是对照每一章的示例代码 ...