<!----/此方法基于zepto.min.js-->

<!--/div元素没有blur和focus事件,blur focus 只适用于input 这类的表格元素-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>解决IOS safari在input focus弹出输入法时不支持position fixed的问题</title>
<style type="text/css" rel="stylesheet">

.speak-discuss{ position:fixed; bottom:0rem; font-size:0px; padding-top:0.15rem; padding-bottom:0.15rem; background-color:#fff; border-top:0.01rem solid #b3b3b3; z-index:188; width:100%; max-width:750px; left:auto; height:0.85rem; display:none; }
.speak-discuss form{ padding-left:0.22rem; padding-right:0.2rem; }
.speak-discuss i{ display:inline-block; vertical-align:middle; width:0.47rem; height:0.47rem; background:url(../images/icon29.png) center center no-repeat; background-size:0.47rem 0.47rem; position:absolute; left:0.22rem; top:50%; margin-top:-0.3rem;}
.speak-discuss input[type=text]{ padding:0px; outline:none; margin-left:0.72rem; border:0.01rem solid #ababab; line-height:0.66rem; padding-left:0.11rem; padding-right:0.11rem; border-radius:0.18rem; max-width:80%; width:80%;}

</style>
</head>

<body>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div class="speak-discuss">
<form>
<i></i><input type="text" placeholder="评论" onfocus="javascript:if(this.value=='评论')this.value='';" />
</form>
</div>

<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript">
//只作用于输入框获得焦点时
$('.speak-discuss').focus(function(){
var _this = this;

//无键盘时输入框到浏览器窗口顶部距离
var noInputViewHeight = $(window).height() - $(_this).height();

//网页正文内容高度
var contentHeight = $(document).height() - $(_this).height();

//控制正文内容高度大于一屏，保证输入框固定底部
contentHeight = contentHeight > noInputViewHeight ? contentHeight : noInputViewHeight;

//因为弹出输入法需要时间，需延时处理
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 });

//给窗口对象绑定滚动事件，保证页面滚动时div能吸附软键盘
$(window).bind('scroll', function(){

//表示此时有软键盘存在，输入框浮在页面上了
if (inputTopHeight != noInputViewHeight) {

//页面滑动后，输入框需跟随移动的距离
var offset = $(this).scrollTop() - startScrollY;

//输入框移动后位置
afterScrollTopPos = inputTopPos + offset;

//设置输入框位置使其紧贴输入框
$(_this).css({'position':'absolute', 'top':afterScrollTopPos });
}
});
}, 100);
})

$(".speak-discuss input").blur(function(){//输入框失焦后还原初始状态
$(".div-input").removeAttr('style');
$(window).unbind('scroll');
});
</script>

</body>
</html>

ios下input获取焦点以及在软键盘的上面的更多相关文章

  1. ios下input focus弹出软键盘造成fixed元素位置移位

    正常状态下 input focus软键盘弹出时 问题描述: 头部结构fixed,滚动到下部内容区域,input.textarea等focus弹出软键盘时,头部位置偏移被居中(该问题ios7 beta3 ...

  2. IOS下 input 被软键盘方案遮盖问题解决

    前言: 并没有完美解决 ! 场景: 最近在做企业微信H5的一个项目,里面有个动态列表页,开始输入框是隐藏的,点击评论才会出现并让 input 聚焦.经过测试在安卓上面应该没什么问题,但是iOS上面会出 ...

  3. web前端 在 iOS下 input不能输入 以及获取焦点之后会出现蓝色的border轮廓

    iOS下 input 不能获取焦点 获取焦点后:设置border:none无效果 .hb_content input{ display: inline-block; margin-left: 0.22 ...

  4. IOS下HTML5获取焦点 弹键盘

    IOS下sifari和webview默认屏蔽textarea/inputbox获取焦点弹出键盘 苹果移动设备的WebView默认屏蔽textarea/inputbox获取焦点弹出键盘,需要在APP页面 ...

  5. android全屏下的输入框未跟随软键盘弹起问题

    最近开发中遇到,全屏模式下输入框在底部不会跟随软键盘弹起.于是网上搜索了解决的方案.大致找到了两种方案. 第一种 定义好此类 public class SoftKeyBoardListener { p ...

  6. ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

    前端h5混合开发手机端ios  当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...

  7. Quill编辑器IOS下无法获取焦点的解决方法

    造成Quill-Editor无法获取焦点的大部分原因是Css的问题,罪魁祸首: *{ -webkit-user-select:none; } ios下直接造成无法获取焦点. 解决方法,覆盖以上css设 ...

  8. 在iOS下-input[disabled] 颜色变浅兼容&& input[readonly]仍可获取焦点解决方法

    目标:在写input输入框时,想让其只读不写. 环境:在iPhone上 本来用的时readonly,可是readonly,居然可以获取焦点,不能弹出键盘:安卓手机完全木有问题,所以去用了disable ...

  9. 解决只读时ios下input光标问题

    应用场景:在ios手机下对只读的input设置readonly=readonly属性还是会出现光标 解决方法: //解决ios日期光标问题 $("#Stime ,#provinceCity& ...

随机推荐

  1. java如何修改java.library.path并且不重启jvm也能生效

    先说一下需求吧, 目前在用JCEF实现java程序桌面版包装,源码中需要加载编译好的几个dll文件,而这些文件的路径必然是根据程序安装的路径而变化的,这就需要在程序运行的时候,去动态修改java.li ...

  2. 三元运算与lambda表达式

    #三元运算,就是对if else的简写 if 1 == 1: print("jasper") else: print("sb") 三元运算写法 name=&qu ...

  3. 学习日志 - Openwrt安装python然后wallproxy

    前提: - 先要把U盘插入路由器的usb口,大多数情况Openwrt都会自动挂载的吧,尽量找当前年或前一年的固件.ssh进路由器,可以看到/mnt/sda1 -  让路由器联网,因为需要从网络上下载安 ...

  4. video 手机全屏自动播放

    <video src="video.mp4" id="video" x-webkit-airplay="true" webkit-pl ...

  5. angular的$scope

    angularJS是一个MVVM的前端js框架. $scope的作用是angular向视图(html)传递数据的通道,它不负责处理和操作数据.也就是说要想向视图传递数据的话,必须定义$scope变量. ...

  6. 如何在RCP程序中添加一个banner栏

    前言:这段时间还算比较空闲,我准备把过去做过的有些形形色色,甚至有些奇怪的研究总结一下,也许刚好有人用的着也不一定,不枉为之抓耳挠腮的时光和浪费的电力.以前有个客户提出要在RCP程序中添加一个bann ...

  7. Web API

    https://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api ...

  8. centos 6.6中的yum源更换成国内的阿里云yum源

    阿里云Linux安装镜像源地址:http://mirrors.aliyun.com/ 第一步:备份你的原镜像文件,以免出错后可以恢复. mv /etc/yum.repos.d/CentOS-Base. ...

  9. laravel的配置文件

    app/config 中的配置说明   1 在 app/config 文件夹中经常配置的一般有两个文件:app.php 和 database.php 两个文件,他们一个是配置项目杂项的.一个是配置数据 ...

  10. Cheatsheet: 2016 04.01 ~ 04.30

    .NET String format Setting up Ubuntu for .NET Development ASP.​NET Core and Angular2 - Part 1 - Upda ...