在做手机端的表单提交的时候，在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. Java泛型与Restlet客户端

    写一个与restlet服务器通信的客户端类,用于测试通信是否成功,并且进行交互.为了方便其他人使用,于是,写一个通用的方法封装起来,可是中途却放生了一些问题. 按照正常写法,顺序走下来是这样的: pu ...

  2. 安装docker ce版

    可参考 菜鸟教程:http://www.runoob.com/docker/centos-docker-install.html 官网教程:https://docs.docker.com/instal ...

  3. LayaAir从入门到放弃

    我是一个小白程序员,准备开发小程序找了很久小程序开发引擎,看到白鹭和LayaAir .经过一番资料查找后被LayaAir高性能.接口简洁及社区活跃所吸引,然后选择了LayaAir. 开发过程中一般小问 ...

  4. 基于MVC框架Aspose.Words打印到Word中写法

    控件bin文件下载地址:https://download.csdn.net/download/u012949335/10610726 //前端打印写法 @{ ViewBag.Title = " ...

  5. Delphi - 10.1编译OSX10.12程序遇到错误解决了！

    昨天,尝试Delphi的跨平台开发功能,在windows10下,做了一个控制台程序,发布目标平台是OSX10.12,中间配置过程都非常顺利,没有任何错误,但是当编译运行时候出现下面错误: [dccos ...

  6. jzoj2941

    我們可以暴力枚舉每一個人分幾個糖果,再暴力統計答案即可 每次遞歸下去可以從1-n號人,決定選多少個糖果再遞歸 #include<bits/stdc++.h> using namespace ...

  7. git 拖下laravel 代码后报错 Warning: require(D:\WWW\laravel\bootstrap/../vendor/autoload.php

    omposer    install  执行 Problem 1    - Installation request for doctrine/annotations v1.5.0 -> sat ...

  8. 一，PHP会话机制---cookie

    1,  什么是会话 会话可简单理解为:用户打开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 2,  cookie技术 cookie(小甜饼)是客户端技 ...

  9. eclipse代码中使用到Launcher获取类加载器，找不到启动器类。

    解决:移除系统依赖的jar包,重新导入. 只需要在project build path中先移除JRE System Library,再添加库JRE System Library,重新编译后就一切正常了 ...

  10. jQuery选择器（基础及应用）

    jQuery选择器 jQuery的核心思想就是:选取元素,对其操作. jquery选择器对开发有以下优势:写法简洁,不需要考虑主流浏览器是否支持某些选择器(jquery支持css1-css3),不需要 ...