在做手机端的表单提交的时候，在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. Mac突然没有声音但是重启后可以恢复

    命令行操作方式   今天又发现了Mac上的一个BUG,有时候在工作之余我们去吃饭的时候Mac经常会进入睡眠状态,但是有的时候从睡眠状态激活后,本来想听个音乐,但是突然发现音乐不可以用了,以前每次都是重 ...

  2. Facebook支撑万亿Post搜索背后的技术窥探

    转自http://www.csdn.net/article/2013-10-29/2817333-under-the-hood-building-posts-search 近日,Facebook为po ...

  3. Debezium for PostgreSQL to Kafka

    In this article, we discuss the necessity of segregate data model for read and write and use event s ...

  4. Spring Boot 2 实践记录之 条件装配

    实验项目是想要使用多种数据库访问方式,比如 JPA 和 MyBatis. 项目的 Service 层业务逻辑相同,只是具体实现代码不同,自然是一组接口,两组实现类的架构比较合理. 不过这种模式却有一个 ...

  5. MS SQL 分页存储过程

    最近换了家新公司,但是新公司没有使用分页的存储过程.那我就自个写一个往项目上套 (效率怎么样就不怎么清楚没有详细的测试过) CREATE PROCEDURE [dbo].[pro_common_pag ...

  6. iOS App的加固保护原理

    本文由  网易云发布. 本文从攻防原理层面解析了iOS APP的安全策略.iOS以高安全性著称,但它并非金刚不坏之身.对于信息安全而言,止大风于青萍之末是上上策,杭研深入各个细节的研发工作,正是网易产 ...

  7. CRUD组件的高阶使用

    1.list页面自定列显示: class PermissionConfig(sites.AryaConfig):       def dabo(self, obj=None, is_header=Fa ...

  8. [Angular 6] 初学angular，环境全部最新，[ ng serve ] 不能启动，卡在 95% 不动 => 解决方案

    2018.9.7 问题描述: 通过ng serve命令启动angular应用时,卡在95%, ctrl+c 停掉后看到错误内容为找不到ng_modules下的angular模块下的package.js ...

  9. Vue+Flask看这篇就够了

    一.项目目录结构 使用Vue+Flask搭建前后端分离的基础平台. my_project/ app/ //vue目录 static/ models/ remplates/ 404.html index ...

  10. SQL与NOSQL

    一:关系型数据库 1.概念: 采用了关系模型来组织数据的数据库.简单讲,关系模型就是二维表格模型.二维表格在              数据库中我们称之为记录,列在数据库中我们成为字段. 2举例: M ...