<!----/此方法基于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. 使用discovery板上的st-link给别的板子下载

    discovery板上的6pin swd接口 20pin 的jtag 接线: 6 20 def 1 1 目标vdd 2 9  swclk(PA14) 3 20 gnd 4 7  swdio(PA13) ...

  2. eaysui 利用datagrid 实现左右移除数据

    效果图 $(function () { var logBussnessAgentData = []; var logInspectionEngineerData = []; //选中 $(" ...

  3. winform 对话框，保存，另存为，还有打印控件

    学习的对话框的种类: 1.打开文件对话框(OpenFileDialog) 2.保存文件对话框(SaveFileDialog) 3.字体对话框(FontDialog) 4.颜色对话框(ColorDial ...

  4. linux开发缩写

    1.CONFIG_OF 在一些驱动中经常看到#ifdef CONFIG_OF,这里的OF是Open Firmware. Open Firmware. This was invented long ti ...

  5. 3.密码pasuwado————记第一次超越Candy？

    激动人心的2016.11.4模拟赛结束了 更激动人心的是我得了90分,第一次超越豪哥,特立文纪念. 3.密码 [问题描述] 哪里有压迫,哪里就有反抗. moreD的宠物在法庭的帮助下终于反抗了.作为一 ...

  6. phprpc的简单使用

    PHPRPC 是一个轻型的.安全的.跨网际的.跨语言的.跨平台的.跨环境的.跨域的.支持复杂对象传输的.支持引用参数传递的.支持内容输出重定向的.支持分级错误处理的.支持会话的.面向服务的高性能远程过 ...

  7. Java开发中经典的小实例-(打印输入重复的值)

    import java.util.ArrayList;import java.util.Scanner;public class Test8 {    public static void main( ...

  8. socket.io中emit和on的用法

    socket.emit('action');表示发送了一个action命令,命令是字符串的,在另一端接收时,可以这么写: socket.on('action',function(){...});soc ...

  9. 【树莓派】【转】将树莓派Raspberry Pi设置为无线路由器(WiFi热点AP,RTL8188CUS芯片)

    下文为转载,文章转自:http://wangye.org/blog/archives/845/,仅供本次学习实践参考. 最近又开始折腾起Raspberry Pi来了,因为某处上网需要锐捷拨号,于是我就 ...

  10. 转 unity 优化

    最近研究U3D开发,个人认为,精通一种新的技术,最快最好的方法就是看它的document,而且个人习惯不喜欢看中文的资料,原汁原味的东西是最正确的,一翻译过来很多东西就都不那么准确了.于是通读了uni ...