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 固定下方的输入框,点击输入框位置会变的修复的更多相关文章

  1. 移动端 fixed 固定按钮在屏幕下方,然后按钮被键盘顶上来...顶上来了有没有~

    在移动端 H5 页面开发中,我使用了 fixed 固定某个元素在屏幕的最下方, 这时点击输入框,接着非常非常自然地出现了元素被系统键盘顶起来的情况,如下图. 解决方案: 首先,给页面最外层包裹一层 d ...

  2. 移动端ios 输入框fixed固定在底部 焦点时乱跳加遮盖问题的解决 转自zhangyunling 加个人项目解决方案

    如果您有过移动端的开发经验,那么您是否碰到过这样的问题,一个页面有输入框,当这个输入框聚焦时,输入框在IOS下,被移动到手机屏幕的当中去了,而在Android端,有些浏览器的输入框,会被键盘盖住. 1 ...

  3. Swift3.0服务端开发(一) 完整示例概述及Perfect环境搭建与配置(服务端+iOS端)

    本篇博客算是一个开头,接下来会持续更新使用Swift3.0开发服务端相关的博客.当然,我们使用目前使用Swift开发服务端较为成熟的框架Perfect来实现.Perfect框架是加拿大一个创业团队开发 ...

  4. 移动端用js与jquery实时监听输入框值的改动

    背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...

  5. 【前端开发】解决ios设备上fixed浮动的input输入框兼容问题

    我们在开发移动端页面时,经常会存在这种需求,在页面顶部或底部有一个输入框,一直浮动在顶部或底部位置,中间部分的内容是可以滚动的.比如底部输入框的搜索功能,或底部输入框的写评论功能. 这种问题,我们一般 ...

  6. H5页面移动端IOS键盘收起焦点错位

    出现场景:IOS端,在弹出层点击input时调起键盘页面会被顶上去document.body.scrollOffset大于0,收起键盘时scrollOffset不变,造成焦点错位. 注:安卓手机点击时 ...

  7. ios点击输入框,界面放大解决方案

    当我们编写的input宽度没有占满屏幕宽度,而且又没有申明meta,就会出现点击输入框,界面放大这个问题. 下面我直接给出解决方案: <meta name="viewport" ...

  8. 移动端IOS和androi及浏览器js判断[转载]

    转载自:http://www.niutifa.com/?p=561 移动端IOS和androi及浏览器js判断: <script type="text/javascript" ...

  9. ios上有时候提交按钮点击两次才可以取消输入框软键盘

    ios上有时候提交按钮点击两次才可以取消输入框软键盘,点击第一次软键盘消失,点击第二次输入框页面消失,这样用户体验不好.我的做法是用 touchstart 代替click来处理 反应快,但是有时候会出 ...

随机推荐

  1. COCO数据集格式互换

    poly->compacted RLE:     seg=np.array([312.29, 562.89, 402.25, 511.49, 400.96, 425.38, 398.39, 37 ...

  2. 在cef中使用自定义协议(scheme)

    在谷歌浏览器中点击设置,地址栏里出现的不是普通网址,而是chrome://settings/ 这个地址就是谷歌浏览器的自定义scheme,cef也提供了自定义协议手段.主要是通过 以下几步: 1.继承 ...

  3. lnmp或者lamp环境一键安装

    参考网址:https://lnmp.org/install.html 下载并安装LNMP一键安装包: 您可以选择使用下载版(推荐美国及海外VPS或空间较小用户使用)或者完整版(推荐国内VPS使用,国内 ...

  4. _spellmod

    -- 技能修改 -- 小技巧:可以针对技能进行修改 (进行会对其进行更新,增加技能开关) `comment` 备注 `spellId` 技能ID `reqId`需求ID `dmgMod`伤害倍数 `h ...

  5. 使用RStudio调试(debug)基础学习(一)

    点击行号的左侧,即可设置断点(或者按下Shift+F9),如果没有出现,反而出现下图的警告: 那么只是因为我的坏习惯--写一段脚本测试的时候都是新建,但不save到本地,不喜欢保存,写的差不多了才开始 ...

  6. Rancher2.0中邮件通知的设置

    1-邮件通知的设置-中国电信189邮箱 2-2-邮件通知的设置-腾讯免费企业邮箱 **说明:网易163邮箱.QQ邮箱没有设置成功,可能是因为邮箱设置得太安全的缘故.   参考链接: 中国电信189邮箱 ...

  7. kafka生产者

    1.kafka生产者是线程安全的,她允许多个线程共享一个kafka实例 2.kafka管理一个简单的后台线程,所有的IO操作以及与每个broker的tcp连接通信,如果没有正确的关闭生产者可能会造成资 ...

  8. 新建vue项目中遇到的报错信息

    在npm install的时候会报错,经过上网查阅资料之后,解决方法如下: 0.先升级npm版本:npm install -g npm   有可能是npm版本过低报错 1.然后清理缓存: npm ca ...

  9. JxBrowser之三:常用函数setNetworkDelegate

    1.常用函数setNetworkDelegate,包含对网络传输数据状态的多种监控回调. 2.着重说一下其中的几个函数 BrowserContext browserContext = BrowserC ...

  10. 使用Python访问微信

    itchat是一个开源的微信个人号接口,使用它我们可以很方便的访问我们个人微信号里的信息.itchat的github地址如下: https://github.com/littlecodersh/itc ...