在做手机端的表单提交的时候，在chrome浏览器调试的时候，忘记输入法会引起布局的问题。在webApp里input输入框，会自动调起输入法，但是输入法会改变浏览器的可视区域的大小。就是会把浏览器可视区域的内容变小，因为输入法要占地方。一开始不知道怎么解决了，查了写资料，网上说是监控resize，当页面发生变化的时候，会触发该事件；哈哈,这就好办了...

　　开始按钮的显示是这样的, 在填写银行账号的时候，还会影响文本框的输入...

　　

　　因为我使用的是vue2.x,那么就在mounted钩子函数里监听该事件：

　　

　　btnShow 实在data里声明的变量，默认是true（其实也可以动态改变 :style 来隐藏或显示，也可以设置z-index=-1来改变按钮的显示状态）；当监控的resize发生变化的时候，实时的获取浏览器的高度（newHigh）；在和这个页面的实际高度（oldHigh）对比，如果 newHigh 小于 oldHigh 说明浏览器的高度被输入法遮挡了一部分；这个时候，可以让button隐藏；反之显示；

　　实现的效果如下：

　　

　　基本实现了自己的需求...

　　

button按钮被输入法顶起来，遮盖了input输入框的更多相关文章

  1. VUE实现Studio管理后台（十三）：按钮点选输入控件，input输入框系列

    按钮点选输入,是一个非常简单的控件,20分钟就能完成的一个控件.先看效果: 根据以前的设定,通过json数据动态生成这两个按钮,示例中这两个按钮对应的json代码: { label:'标题', val ...

  2. 勾选checkbox之后，button按钮可用

    js:function chkClick() {    if (document.getElementById("chkBox").checked == true) {       ...

  3. button 按钮，结合onclick事件，验证和提交表单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 如何在MFC界面开发中响应Button按钮的Down和Up事件

    通过尝试有两种方案可以解决这个问题,第一种方案是通过PreTranslateMessage函数在调度消息之前对消息类型进行筛选,第二种方案是重载CButton类,在重载后的类CForTestButto ...

  5. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  6. button按钮

    button按钮只加类名不加type时,点击此按钮页面会刷新

  7. Unity3D NGUI 给button按钮添加单间事件

    Unity3D中, NGUI 给button按钮添加单间事件的方法很多,在这里只给推荐一种比较常用的方法. 推荐方法:使用UIListener. 1.给button组价添加上UIListener.选择 ...

  8. iphone中button按钮显示为圆形解决

    iphone中button按钮显示为圆形解决: 添加样式: -webkit-appearance:button; 如果需要为直角: border-radius:0 在源码中添加如:style=&quo ...

  9. 【html】button按钮的一些问题

    问题: button 按钮在不设置 type 属性时,在不同的浏览器作用不一样.举个例子: html: <!doctype html> <html lang="en&quo ...

随机推荐

  1. vs web项目远程发布到IIS

    一.下载安装 IIS安装管理服务,这里不赘述,安装完后显示如下(装完刷新一下或者重新打开iis) 下载webploy,安装的时候要选中远程功能,或者选择完全安装,否则会因为没有远程模块导致连接失败(注 ...

  2. NET 文件批量下载

    HTML <a class="btn btn-warning" id="btnDownload">选中下载</a> JS /* 批量下载 ...

  3. BitAdminCore框架应用篇：（五）核心套件querySuite列的定义

    索引 NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/coo ...

  4. Kettle 使用入门

    Kettle是一款国外开源的ETL工具,纯java编写,可以在Window.Linux.Unix上运行,数据抽取高效稳定. 本文介绍一个入门例子:使用Kettle从动态指定的文件名对应的文本文件里抽取 ...

  5. CEPH 创建 RPM 安装包

    1.安装依赖环境 yum install gcc make python-devel openssl-devel graphviz autoconf automake rpm-build redhat ...

  6. Python中进程和线程的总体区别

    Num01–>线程 线程是操作系统中能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位. 一个线程指的是进程中一个单一顺序的控制流. 一个进程中可以并发多条线程,每条线程并行 ...

  7. LOJ#3086. 「GXOI / GZOI2019」逼死强迫症（矩阵快速幂）

    题面 传送门 题解 先考虑全都放\(1\times 2\)的方块的方案,设防\(i\)列的方案数为\(g_i\),容易推出\(g_i=g_{i-1}+g_{i-2}\),边界条件为\(g_0=g_1= ...

  8. zoj2893 Evolution（矩阵快速幂）

    题意:就是说物种进化,有N种物种,编号是0——N-1,M次进化后,问你编号为N-1的物种有多少数量:其中要注意的就是i物种进化到j物种的概率是p:(那么剩下的不要忘了):所以单位矩阵初始化对角线的值为 ...

  9. (5)Oracle基础--约束

    · 约束的作用 <1> 定义规则 <2> 确保数据的完整性 · 约束 <1> 非空约束 ① 创建表时为字段添加非空约束 CREATE TABLE table_nam ...

  10. iOS多线程---GCD中线程的通信

    在子线程的任务完成后,有时候需要从子线程回到主线程,刷新UI. 从子线程中回到主线程,以前已经写过一种方法: [self.imageView performSelectorOnMainThread:@ ...