<!----/此方法基于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. ShowDoc部署手册

    ShowDoc介绍 关于ShowDoc的介绍,请访问:http://blog.star7th.com/2015/11/1816.html 环境依赖 1.必需环境 PHP5.3以上版本.php-gd库 ...

  2. 磁盘IO

    基本概念: 在数据库优化和存储规划过程中,总会提到IO的一些重要概念,在这里就详细记录一下,个人认为对这个概念的熟悉程度也决定了对数据库与存储优化的理解程度,以下这些概念并非权威文档,权威程度肯定就不 ...

  3. Python写一个Windows下的android设备截图工具

    界面版 利用python的wx库写个ui界面,用来把android设备的截图输出到电脑屏幕,前提需要安装adb,涉及到的python库也要安装.代码如下: import wx,subprocess,o ...

  4. awk 高级技巧

    netstat -nat |awk '{print $6}'|sort|uniq -c|sort -rn netstat -n | awk '/^tcp/ {++S[$NF]};END {for(a ...

  5. OpenLayers2.13.1知识整理

    对于地图的默认加载等,网上很多资料,就不细说了,主要整理解决一些api不明显或不全的内容 因玩webgis只有一周左右,肯定很水~~ 我资料中的目录结构如下: html map js(自己封装的js目 ...

  6. JAVA-小青蛙跳石头游戏

    游戏摘自微信传的手机网页版小游戏,我拿来做成了JAVA的界面版,但是没有去做素材,,直接拿方块代替小青蛙.游戏原址就不分享了,只能在手机上打开. 下面是源码: /* * Main.java * */ ...

  7. Cheatsheet: 2016 06.01 ~ 6.30

    Other Swift for the Java guy: Part 1 – Getting Started Building a better code review process Creatin ...

  8. xmemcached的使用

    转载 http://www.voidcn.com/blog/u010408365/article/p-4972896.html xmemcached主要特性 高性能 XMemcached同样是基于ja ...

  9. test homework2 ~ faulty program

    Program1:

  10. 浅谈html5及其新特性

    什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍 ...