在做手机端的表单提交的时候，在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. WPF 最简单的TextBox水印

    最简单的TextBox加水印的方法,但是不具有很强的通用性. 如果你只是使用一次,或者用的不多,偷偷懒可以使用. 因为此方法只需要修改TextBox的Template,而不用重写何任代码. 注意: 1 ...

  2. 微软儿童编程技术，kodu（酷豆）为儿童创造一个游戏世界

    受微软青年星火项目组的邀请,我和微软项目组的朋友参加了一场针对儿童编程的技术指导. 儿童和编程,本来是两个完全不靠边的词.在大家的常规思维中,编程一直是软件开发人员的事情,是高科技类型的工作,高不可攀 ...

  3. 【实战TFS】【QQ群】了解别人是如何使用TFS的

    长时间在这个QQ群里面混,了解到其他人是如何使用TFS系统的,也与网友们一起探讨,共同提高,还有分享的大量资料文档. 推荐一下:):)

  4. ASP.Net Core 2.2 MVC入门到基本使用系列 (四)

    本教程会对基本的.Net Core 进行一个大概的且不会太深入的讲解, 在您看完本系列之后, 能基本甚至熟练的使用.Net Core进行Web开发, 感受到.Net Core的魅力. 本教程知识点大体 ...

  5. NLayerAppV3--基础结构层（Cross-Cutting部分）

    回顾:NLayerAppV3是一个使用.net 2.1实现的经典DDD的分层架构的项目. NLayerAppV3是在NLayerAppV2的基础上,使用.net core2.1进行重新构建的:它包含了 ...

  6. Eclipse设置代理

    Windows->Preferences->General->Network Connections下面可以设置代理 如果要指定特定的代理地址,需要把类型改为Manual 通常htt ...

  7. 【cocos2d-x 手游研发小技巧（6）聊天系统+字体高亮】

    转载请注明出处:http://www.cnblogs.com/zisou/p/cocos2dxJQ-6.html 聊天系统在手机网游中是最常见的交互工具,大家在一起边玩游戏边聊天岂不乐哉: 废话不多了 ...

  8. sqlServer存储过程与sql语句的区别

    sqlServer   存储过程与sql语句的区别 sql存储过程与sql语句的区别: 从以下几个方面考虑: 1.编写: 存储过程:编写比较难: sql语句:相对简单: 2.性能: 存储过程:高,可移 ...

  9. 一，php的错误处理和异常处理

    php程序中如果语法或逻辑错误,会引起php默认错误处理机制,不会引起异常处理机制,只有在程序中throw抛出异常后,如果没有catch捕捉异常,默认调用php默认异常处理. php有默认错误机制和默 ...

  10. 如何查看linux服务器的版本和配置信息

    linux下看配置,可没有windows那么直观.你只能一个一个查看. 一:cpu[root@srv /]# more /proc/cpuinfo | grep "modelname&quo ...