<!----/此方法基于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. jQuery概述

    JQUERY   JS语法字典---网友总结 1.document.write(""); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->ht ...

  2. Java 基础 Map 练习题

    第一题 (Map)利用Map,完成下面的功能: 从命令行读入一个字符串,表示一个年份,输出该年的世界杯冠军是哪支球队.如果该 年没有举办世界杯,则输出:没有举办世界杯. 附:世界杯冠军以及对应的夺冠年 ...

  3. angularjs $broadcast 和 $on 的使用及其注意事项

    下面是demo: <div ng-controller="ParentCtrl"> www.111cn.net //父级 <div ng-controller=& ...

  4. MySQL常用语句

    第1章 SQL结构化语言 1.什么是SQL? SQL,英文全称Structured Query Language,中文意思是结构化查询语言,它是一种关系型数据库中的数据进行定义和操作的语言方法,是大多 ...

  5. 微信OAuth2.0网页授权

    1.OAuth2.0网页授权 关于网页授权的两种scope的区别说明 1.以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页 ...

  6. Android 基础概念了解

    Android 的前世今生Android 系统框架Android 主要组成 部分Android 常用的操作 Android 的前世今生 Android 的诞生 2003年10月,有"Andr ...

  7. Oracle(创建index)

    概念: 1. 类似书的目录结构 2. Oracle 的“索引”对象,与表关联的可选对象,提高SQL查询语句的速度 3. 索引直接指向包含所查询值的行的位置,减少磁盘I/O 4. 与所索引的表是相互独立 ...

  8. 中国天气网放回json的解释

    本文是出自David_Tang的,原文http://www.cnblogs.com/mchina/archive/2013/07/12/3170551.html {"weatherinfo& ...

  9. 调用微信JsAPI端获取位置

    public partial class test : BasePage { protected test() { AccessPage = PageWebType.WX; } protected s ...

  10. python 01

    注意Python 是大小写敏感的,即print 与Print 不一样 推荐编辑器 vim & sublime 如何运行 #!/usr/bin/python#Filename: hellowor ...