css3软键盘不盖住输入框的方法
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软键盘不盖住输入框的方法的更多相关文章
- 解决react-native软键盘弹出挡住输入框的问题
解决react-native软键盘弹出挡住输入框的问题 写登录页面,整体界面居中之后就出现软键盘弹出挡住输入框,用户体验不好的情况.用了RN官方的KeyboardAvoidingView组件,会有多出 ...
- iOS中监控软键盘显示或隐藏的可靠方法
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 如果你试图在软键盘的显示或隐藏时去改变的UI界面结构,仅有的方 ...
- Android软键盘弹出,覆盖h5页面输入框问题
之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位 ...
- KeyboardUtil【软键盘弹出后输入框上移一定的高度】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 演示获取软键盘高度并保存,然后根据输入框的原有位置是否被软键盘挡住了,如果被挡住了则将整体页面上移一定的高度,当软键盘隐藏的时候再下 ...
- ios移动输入框被软键盘遮挡
页面输入框会出现被软键盘挡住的问题: 解决方法:获取input点击事件设置body高度 $('input').bind('click',function(e){ var $this = $(this) ...
- Android软键盘遮挡布局的那些事
有朋友提到软键盘遮挡布局的问题,说网上找了很多资料都未能解决,下面我来总结一下那些事,有些内容也是从网友那里学来的,但是我都会自己验证正确了才会贴出来. 首先来分析下我们常见的遮挡问题有哪些(本次所说 ...
- 【移动端web】软键盘兼容问题
软键盘收放事件 这周几天遇到了好几个关于web移动端兼容性的问题.并花了很长时间去研究如何处理这几种兼容问题. 这次我们来说说关于移动端软键盘的js处理吧. 一般情况下,前端是无法监控软键盘到底是弹出 ...
- H5软键盘兼容方案
前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...
- 可能这些是你想要的H5软键盘兼容方案
前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...
随机推荐
- python编程基础之二十一
元组: t1 = () t2 = tuple() 成员访问: t1 =(10,7,12,23) print(t1[0]) #下表访问 连接操作 t1 = (1,2,3) t2 =(4,5,6) t3 ...
- UVA - 12099 The Bookcase
No wonder the old bookcase caved under the massive piles of books Tom had stacked on it. He had bett ...
- Android Studio:多包名打包
来自:http://m.blog.csdn.net/u011315960/article/details/73251196 前言 最近有点小忙,博客都落下了,今天赶紧写点东西补上. 前几天商务找我,想 ...
- 古剑奇谭三已取消该页导航,B站版本无法登陆
最近登陆古剑三突然出现这个问题 怎么重开也无法登陆 最后发现是Ie设置问题 解决方法 点中间这个圆形图标打开 小娜 搜索“ie” 点击打开ie之后点右上角的小齿轮 选择“internet选项” 连接- ...
- apply、bind、call方法的作用与区别
js中call.apply.bind方法的作用和区别 1. call方法 作用:专门用于修改方法内部的 this 指向 格式:xxx.call( 对象名, 参数1, 参数2 , ...);.即:将 x ...
- 微信小程序发起请求
一.示例代码 wx.request({ url: 'test.php', // 仅为示例,并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-ty ...
- 浏览器渗透框架BeEF使用笔记(一)
0x00 前言 BeEF,全称The Browser Exploitation Framework,是一款针对浏览器的渗透测试工具. 用Ruby语言开发的,Kali中默认安装的一个模块,用于实现对XS ...
- 非阻塞IO模型
#include<stdio.h> #include<stdlib.h> #include<string.h> #include<unistd.h> # ...
- 7.HTTP协议
1.什么是url? 1.1 URL是统一资源定位符,表示的是一个资源,(图片 文字 视频 音频 等等) 单个资源介绍--图片 那URL的组成部分是由协议, 域名:端口, 路径和文件名 1.2 url组 ...
- 时序数据库InfluxDB(I)- 搭建与采集信息demo操作
搭建环境:vmware workstation pro15.5.0, ubuntu18.04.3 实践时间:2019.10.12-10.27 (一)时序数据库InfluxDB准备 (1)安装 曾出现问 ...