移动端IOS 固定下方的输入框,点击输入框位置会变的修复
if(data=="ios"){
var _this = $(".publish");
//无键盘时输入框到浏览器窗口顶部距离
var noInputViewHeight = $(window).height() - $(_this).height();
//网页正文内容高度
var contentHeight = $(document).height() - $(_this).height();
//控制正文内容高度大于一屏,保证输入框固定底部
contentHeight = contentHeight > noInputViewHeight ? contentHeight : noInputViewHeight;
$('#txt_question').focus(function(){
iosinput = 1;
setTimeout(function(){
//弹出输入法时滚动条的起始滚动距离
var startScrollY = $(window).scrollTop();
//弹出输入法时输入框到窗口顶部的距离,即到软键盘顶部的起始距离
var inputTopHeight = $(_this).offset().top - startScrollY;
//弹出输入法时输入框预期位置,即紧贴软键盘时的位置。因输入框此时处于居中状态,所以其到窗口顶部距离即为需往下移动的距离。
var inputTopPos = $(_this).offset().top + inputTopHeight;
//控制div不超出正文范围
inputTopPos = inputTopPos > contentHeight ? contentHeight : inputTopPos;
$(_this).css({'position':'absolute', 'top':inputTopPos});
$(_this).addClass("cate52");
//给窗口对象绑定滚动事件,保证页面滚动时div能吸附软键盘
$(window).bind('scroll', function(){
//表示此时有软键盘存在,输入框浮在页面上了
if (inputTopHeight != noInputViewHeight) {
//页面滑动后,输入框需跟随移动的距离
var offset = $(this).scrollTop() - startScrollY;
//输入框移动后位置
afterScrollTopPos = inputTopPos + offset;
//设置输入框位置使其紧贴输入框
if(iosinput==1){
$(_this).css({'position':'absolute', 'top':afterScrollTopPos });
}
}
});
}, 1000);
})
$('#txt_question').blur(function(){
iosinput = 0;
//输入框失焦后还原初始状态
$(_this).removeAttr('style');
$(_this).removeClass("cate52");
$(window).unbind('scroll'); })
}
移动端IOS 固定下方的输入框,点击输入框位置会变的修复的更多相关文章
- 移动端 fixed 固定按钮在屏幕下方,然后按钮被键盘顶上来...顶上来了有没有~
在移动端 H5 页面开发中,我使用了 fixed 固定某个元素在屏幕的最下方, 这时点击输入框,接着非常非常自然地出现了元素被系统键盘顶起来的情况,如下图. 解决方案: 首先,给页面最外层包裹一层 d ...
- 移动端ios 输入框fixed固定在底部 焦点时乱跳加遮盖问题的解决 转自zhangyunling 加个人项目解决方案
如果您有过移动端的开发经验,那么您是否碰到过这样的问题,一个页面有输入框,当这个输入框聚焦时,输入框在IOS下,被移动到手机屏幕的当中去了,而在Android端,有些浏览器的输入框,会被键盘盖住. 1 ...
- Swift3.0服务端开发(一) 完整示例概述及Perfect环境搭建与配置(服务端+iOS端)
本篇博客算是一个开头,接下来会持续更新使用Swift3.0开发服务端相关的博客.当然,我们使用目前使用Swift开发服务端较为成熟的框架Perfect来实现.Perfect框架是加拿大一个创业团队开发 ...
- 移动端用js与jquery实时监听输入框值的改动
背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...
- 【前端开发】解决ios设备上fixed浮动的input输入框兼容问题
我们在开发移动端页面时,经常会存在这种需求,在页面顶部或底部有一个输入框,一直浮动在顶部或底部位置,中间部分的内容是可以滚动的.比如底部输入框的搜索功能,或底部输入框的写评论功能. 这种问题,我们一般 ...
- H5页面移动端IOS键盘收起焦点错位
出现场景:IOS端,在弹出层点击input时调起键盘页面会被顶上去document.body.scrollOffset大于0,收起键盘时scrollOffset不变,造成焦点错位. 注:安卓手机点击时 ...
- ios点击输入框,界面放大解决方案
当我们编写的input宽度没有占满屏幕宽度,而且又没有申明meta,就会出现点击输入框,界面放大这个问题. 下面我直接给出解决方案: <meta name="viewport" ...
- 移动端IOS和androi及浏览器js判断[转载]
转载自:http://www.niutifa.com/?p=561 移动端IOS和androi及浏览器js判断: <script type="text/javascript" ...
- ios上有时候提交按钮点击两次才可以取消输入框软键盘
ios上有时候提交按钮点击两次才可以取消输入框软键盘,点击第一次软键盘消失,点击第二次输入框页面消失,这样用户体验不好.我的做法是用 touchstart 代替click来处理 反应快,但是有时候会出 ...
随机推荐
- Redis 分布式缓存 Java 框架
为什么要在 Java 分布式应用程序中使用缓存? 在提高应用程序速度和性能上,每一毫秒都很重要.根据谷歌的一项研究,假如一个网站在3秒钟或更短时间内没有加载成功,会有 53% 的手机用户会离开. 缓存 ...
- UI自动化(八)xpath
由于最新版火狐不在支持FireBug等开发工具,可以通过https://ftp.mozilla.org/pub/firefox/releases/下载49版本以下的火狐就可以增加Firebug等扩展了 ...
- 剑指offer(47)求1+2+3+...+n
题目描述 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 题目分析 不能用乘除也就不能用公示了,并且不能 ...
- Win32汇编学习(10):对话框(1)
现在我们开始学习一些有关GUI编程的有趣的部分:以对话框为主要界面的应用程序. 理论: 如果您仔细关注过前一个程序就会发现:您无法按TAB键从一个子窗口控件跳到另一个子窗口控件,要想转移的话只有 用鼠 ...
- 《温故而知新》JAVA基础三
面向对象 现实定义: 购买手机 阐述描述配置尺寸啥的,要求能打电话,然后服务员给你拿出一款手机,你所阐述的就是类,服务员给你的就是对象 package com.xie public class Tel ...
- VUE本身是不支持IE的,可用babel-polyfill解决
一般来说VUE本身是不支持IE的,但是可以用特殊的方法来解决,亲测可用第一步:下载插件 cnpm install --save babel-polyfill第二步:入口文件main.js引入( imp ...
- HTTP 协议(一)之基本概念入门
一.网络基础 TCP/IP 计算机与网络设备要相互通信,双方就必须基于相同的方法. TCP/IP 协议族按层次分别分为以下 4层:应用层.传输层.网络层和数据链路层. 应用层: 决定了向用户提供应用服 ...
- attr VS prop 区别
attr 能够增加.获取.删除页面属性.从页面中获取属性值: prop 用来获取.删除元素自带属性.从属性对象中获取属性值. attr 只获取静态属性值,就是页面加载时的最初的属性值: prop 可以 ...
- Bootstrap框架整理
bootstrap框架的介绍 栅格系统 bootstrap框架把整个浏览器的宽度分为12列,并能适配各种屏幕的尺寸大小进行相应的匹配,达到调节页面大小的效果. 首先需要放置一个容器div,class= ...
- TCP建立连接为什么是三次握手,为什么不是两次或四次?
什么是三次握手 学过网络编程的人,应该都知道TCP建立连接的三次握手,下面简单描述一下这个过程. 如图所示 第一次握手:客户端发送TCP包,置SYN标志位为1,将初始序号X,保存在包头的序列号(Seq ...