css3软键盘不盖住输入框的方法

弹出软键盘的时候 最外面的容器高度就发生了变化 要减去软键盘高度了
<pre>
var bodyheight
bodyheight = $('body').height();
var bodywidth = $('body').width();
$('.p6a input').on('click', function() {
var inputwarptop = $(this).parents('.inputwarp').position().top;
$('.p6a').css('height', bodyheight);
$('.p6a').css('width', bodywidth);
$('.p6a_bg').css('height', bodyheight);
$('.p6a_bg').css('width', bodywidth);
$('.swiper-container').css('height', bodyheight);
$('.swiper-container').css('width', bodywidth);
$('.swiper-container').css('top', '-' + (inputwarptop - 100) + 'px');
$('.swiper-slide').css('height', bodyheight);
$('.swiper-slide').css('width', bodywidth);
//判断是否关闭键盘
setTimeout(function() {
var aa = setInterval(function() {
var actbodyheight = $('body').height();
if (bodyheight == actbodyheight) {
$('.swiper-container').css('top', '0px');
clearInterval(aa);
}
}, 200)
}, 1000)
})
</pre>

css3软键盘不盖住输入框的方法的更多相关文章

  1. 解决react-native软键盘弹出挡住输入框的问题

    解决react-native软键盘弹出挡住输入框的问题 写登录页面,整体界面居中之后就出现软键盘弹出挡住输入框,用户体验不好的情况.用了RN官方的KeyboardAvoidingView组件,会有多出 ...

  2. iOS中监控软键盘显示或隐藏的可靠方法

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 如果你试图在软键盘的显示或隐藏时去改变的UI界面结构,仅有的方 ...

  3. Android软键盘弹出,覆盖h5页面输入框问题

    之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位 ...

  4. KeyboardUtil【软键盘弹出后输入框上移一定的高度】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 演示获取软键盘高度并保存,然后根据输入框的原有位置是否被软键盘挡住了,如果被挡住了则将整体页面上移一定的高度,当软键盘隐藏的时候再下 ...

  5. ios移动输入框被软键盘遮挡

    页面输入框会出现被软键盘挡住的问题: 解决方法:获取input点击事件设置body高度 $('input').bind('click',function(e){ var $this = $(this) ...

  6. Android软键盘遮挡布局的那些事

    有朋友提到软键盘遮挡布局的问题,说网上找了很多资料都未能解决,下面我来总结一下那些事,有些内容也是从网友那里学来的,但是我都会自己验证正确了才会贴出来. 首先来分析下我们常见的遮挡问题有哪些(本次所说 ...

  7. 【移动端web】软键盘兼容问题

    软键盘收放事件 这周几天遇到了好几个关于web移动端兼容性的问题.并花了很长时间去研究如何处理这几种兼容问题. 这次我们来说说关于移动端软键盘的js处理吧. 一般情况下,前端是无法监控软键盘到底是弹出 ...

  8. H5软键盘兼容方案

    前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...

  9. 可能这些是你想要的H5软键盘兼容方案

    前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...

随机推荐

  1. 原生js动态创建文本内容的几种方式

    1.通过CreateTextNode文本节点 首先创建该元素(元素节点),然后向一个已存在的元素追加该文本节点 <!DOCTYPE html> <html> <body& ...

  2. 用到的Dos命令总结 持续更新

    1.xcopy命令:复制的扩展命令     常用参数:/s:复制空文件夹 不使用可能会造成文件混乱    /y忽略覆盖提示 使用/y会直接覆盖全部 例子:xcopy lark-UI\dist C:\U ...

  3. 利用pyecharts将数据可视化

    可视化展示在数据分析领域中是一个至关重要的点,好的可视化展示对我们的结果分析有更好的支持作用. 一.问题 在数据分析的时代里面我们需要将数据的可视化展现出来,更加方便用户的观察.如下图 有些时候我们需 ...

  4. 零基础转行web前端,要学习多久?需要掌握些什么?

    web前端开发技术人才越来越吃香,而且web前端领域划分越来越细,对技术的需求越来越高,想学习web前端的人也是越来越多.那么,如何学习web前端知识?从哪开始?转型成为web前端工程师需要学些什么? ...

  5. JavaScript实现百度搜索页面

    JavaScript实现百度搜索页面 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  6. 就改了get,却不让我set?——Java内省机制的神奇行为举止一例

    [相关类库]org.apache.commons.beanutils.BeanUtils,提供对Java反射和自省API的包装,其中底层使用到了Java的内省方法.[内省的一般应用形式]通过类Intr ...

  7. css 动画animation基本属性(干货)

    /* 动画名称 */ animation-name: cloud; /* 属性定义动画完成一个周期所需要的时间,以秒或毫秒计 */ animation-duration:1s; /* 属性定义动画何时 ...

  8. 一次看懂 Https 证书认证

    TLS 传输层安全性协定 TLS(Transport Layer Security),及其前身安全套接层 SSL(Secure Sockets Layer)是一种安全协议,目的是为网际网路通信,提供安 ...

  9. opencv::Canny边缘检测

    Canny算法介绍 五步 in cv::Canny 高斯模糊 - GaussianBlur 灰度转换 - cvtColor 计算梯度 – Sobel/Scharr 非最大信号抑制 高低阈值输出二值图像 ...

  10. python编程系列---进程池的优越性体验

    1.通过multiprocessing.Process()类创建子进程 import multiprocessing, time, os, random def work(index): " ...