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 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...
随机推荐
- 微信小程序前端样式WXSS书写
微信小程序前端样式WXSS书写 一. WXSS的简单介绍 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. 与 CSS 相比,WXSS 扩展的特性有: ...
- 支撑微博亿级社交平台,小白也能玩转Redis集群(实战篇)
上篇文章<支撑微博亿级社交平台,小白也能玩转Redis集群(原理篇)>介绍了Redis集群相关原理,这篇文章将介绍Redis Cluster集群的搭建.配置,运维.扩容等具体操作 集群搭建 ...
- Centos7升级Git版本
centos 升级 Git 版本 问题描述 centos7 系统默认的 git 安装版本是 1.8,但是在项目构建中发现 git 版本过低,于是用源码编译的方式进行升级.同时该文章也适用于安装新的 g ...
- “零基础”如何快速掌握web前端核心技术?
前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML.CSS和JavaScript这些基础知识点,今天想强调一下,学前端开发除了要学这些基础知识外,学员还要在这之上进行延伸和深入的去学,而且互联 ...
- 新手也能看懂的 SpringBoot 异步编程指南
本文已经收录自 springboot-guide : https://github.com/Snailclimb/springboot-guide (Spring Boot 核心知识点整理. 基于 S ...
- nginx::certbot制作免费证书
环境 Ubuntu8.04apt-get update apt-get install software-properties-common add-apt-repository ppa:certbo ...
- i春秋DMZ大型靶场实验(四)Hash基础
下载工具包 打开目标机 通过目录爆破发现 phpmyadmin 在登录位置尝试注入 返现 可以注入 直接上sqlmap 上 bp 代理抓包 sqlmap.py -r bp.txt ...
- 微信小程序初级教程
小程序代码构成 JSON 配置 WXML 模版 WXSS 样式 JS 逻辑交互 JSON 配置 在小程序中,JSON扮演的静态配置的角色. 小程序配置 app.json { "pages&q ...
- MongoDB系列---入门安装操作
MongoDB 学习大纲: 1.MongoDB简介与其它数据库对比以及数据类型 2.MongoDB安装 3.MongoDB简单操作 环境要求: Linux 一.MongoDB简介 1 什么是Mongo ...
- Linux下终端字体颜色设置方法
颜色=\033[代码;前景;背景m 如:\033[1;32;40m表示高亮显示字体为绿色,背景色为黑色 颜色=\[\033[代码;前景;背景m\] echo -e "this is a \0 ...