09-1109-1109-1109-11
02-0201-0903-0104-11
◇本站云标签查看: 10777|回复: 3
关于IOS端，点击输入框，弹出键盘输入时的界面显示问题
主题帖子积分
新手上路, 积分 11, 距离下一级还需 39 积分
新手上路, 积分 11, 距离下一级还需 39 积分
本帖最后由 xainideyun 于
10:00 编辑
我做的项目是一个在线交流模块，用户进入界面，显示的内容是正常的，但是点击输入框后，弹出的键盘会把页面整体向上推，然后标题栏就不见了，这样的用户体验非常糟糕，这是什么原因导致的？用什么方法可以处理呢？我刚开始学习的开发，请各位大侠不吝赐教！
(30.15 KB, 下载次数: 43)
09:39 上传
进入界面时的状态
(73.37 KB, 下载次数: 39)
09:40 上传
点击输入框，弹出键盘后的状态
主题帖子积分
然后安装 ionic键盘插件
使用该插件的用法可以参考 。
主题帖子积分
新手上路, 积分 11, 距离下一级还需 39 积分
新手上路, 积分 11, 距离下一级还需 39 积分
http://www.ionic.wang/js_doc-index-id-66.html
不好意思，看过这篇文章后，还是不知道如何去做，您能不能告知一下具体的代码实现以及编写代码的地方，万分感谢。
主题帖子积分
新手上路, 积分 4, 距离下一级还需 46 积分
新手上路, 积分 4, 距离下一级还需 46 积分
请问这个问题你解决了么？
站长推荐 /1
Ionic(ionicframework)号称未来最有潜力的一款html5移动app开发框架是Angularjs移动端解决方案，Angularjs号称下一代web应用，Ionic移动app开发教程值得拥有
Powered bysurfacepro虚拟键盘不能弹出来是什么情况？
输入手机号码，报价结果将发送到您手机
装修顾问-馨馨
4年行业经验，24h可咨询
10秒闪电通过好友
报价短信已发送到您的手机
因材料品牌及工程量不同，具体报价以量房实测为准
稍候装修管家将回电您，免费提供装修咨询服务
您的装修预算约
*装修管家将回电您，免费提供装修咨询服务
*装修管家将回电您，免费提供装修咨询服务
*因材料品牌及工程量不同，具体报价以量房实测为准
装修顾问 -馨馨
（四年装修行业经验）
微信扫一扫
3.&您家小区名称 :&&
请选择您家的装修时间
surfacepro虚拟键盘不能弹出来是什么情况？
提问者：谈梦桐| 地点：
| 浏览次数：
2194| 时间：
我来帮他解答
还可以输入1500字
已有5条回答
回答数：14380
| 被采纳数：26
surfacepro虚拟键盘不能弹出来是什么情况;
桌面下虚拟键盘可以锁定在任务栏上。 右划菜单，设置里有键盘，按出来一次就恢复了。 另外也可以使用osk打开屏幕键盘！ 重启就好了
回答数：1779
| 被采纳数：9
屏幕键盘弹不出来，或者弹出来没响应，多半时你的微软账号跟其他台式机公用了，然后开启了那个同步键盘语言选项导致的，所以建议大家surface PRO尽量用一个单独的账号，并且不建议安装其他输入法，微软拼音已经够用了，安装其他输入法也会导致屏幕键盘出问题。(希望您采纳)
回答数：24951
| 被采纳数：64
您好，桌面下虚拟键盘可以锁定在任务栏上,此外可以使用osk打开屏幕键盘!
您也可以试试搭载了第六代智能英特尔酷睿处理器的产品，创新性的使用模式，如实感技术，姿势控制，语音识别，2D/3D影像，突破传统PC使用体验，无论办公学习、畅玩游戏或者观看超高清影像播放，均得心应手，引领产品创新。
回答数：4663
| 被采纳数：6
桌面下虚拟键搜索盘可以锁定在任务栏上。
右划菜单，设置里有键盘，按出来一次就恢复了。
另外也可以使用osk打开屏幕键盘！重启就好了，偶尔抽风
回答数：8069
| 被采纳数：9
桌面下虚拟键盘可以锁定在任务栏上。
右划菜单，设置里有键盘，按出来一次就恢复了。
另外也可以使用osk打开屏幕键盘！
重启就好了。\ 经验分享
【小技巧】H5禁止手机虚拟键盘弹出
工作中遇到如下需求，点击输入框弹出自定义弹窗，输入框是input标：
但是在移动端，input会默认触发手机的虚拟键盘，如何阻止手机虚拟键盘弹起呢？目前我试过有两个方案，一个是给input添加readonly属性,另一个就是在input事件处理方法前面添加一句document.activeElement.blur()。
使用readonly属性
使用readonly方式来阻止虚拟键盘弹出应该是最简单最优雅的方式了。readonly 属性规定输入字段为只读。只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
值得一提的是它的取值，只要声明了readonly属性，不管取什么值都可以，比如readonly=""、readonly="readonly"、readonly="abc"都是一样的
优点：简单
缺点：在iOS的Safari中无效（未做更多情况测试）
document.activeElement.blur()
这是个什么玩意儿？document.activeElement是一个Web API接口。MDN上的解释是：它返回当前页面中获得焦点的元素，也就是说，如果此时用户按下了键盘上某个键，会在该元素上触发键盘事件，该属性是只读的。
document.activeElement属性始终会引用DOM中当前获得了焦点的元素。元素获得焦点的方式有用户输入(通常是按Tab键)、在代码中调用focus()方法和页面加载。
它里面有很多方法，在浏览器控制台查看，可以看到有很都方法：
MDN上还展示了一个有意思的示例，
那么document.activeElement.blur()为什么可以阻止虚拟键盘弹出呢？原因是：当你点击input的时候，document.activeElement获得了DOM中被聚焦的元素，也就是你点击的input，而调用.blur()方法，blur我相信大家都知道吧，就是取消聚焦。获得被聚焦的元素然后强制blur以达到没有聚焦的样子、、、感觉绕了。
优点：支持Android、iOS
缺点：需要添加额外的JS代码
这句代码加在什么地方？加入有如下HTML
&div class="calendar"&
&input type="text" id="datePicker" class="date_picker" placeholder="点击选择入住日期"/&
那么这句JS加在事件处理方法中
$("#datePicker").focus(function(){
document.activeElement.blur();
就当前需求来说，用document.activeElement.blur()确实是在绕弯子，直接使用readonly是最佳方案。但是document.activeElement很强大，可以做很多事。
若觉得本文不错，就分享一下吧！
作者的热门手记
请登录后，发表评论
评论加载中...
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-2在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
这是一个很诡异的问题。
我的iPhone4S和iPad Air未出现被虚拟键盘遮挡的问题。
同事的iPhone4和iPad和三星和iPhone5S会出现被虚拟键盘遮挡的问题。
我想这个情况应该由操作系统来处理的，当输入组件focus后，虚拟键盘弹起并把网页向上推一定距离(或者调整输入组件在合适的位置)。是这样的吗？
另外，遇到输入框被虚拟键盘遮挡的问题该如何解决呢？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
应该是 body 的高度为 100% 导致的。
jsif (isAndroid) {
var windowHeight = document.documentElement.clientH
document.body.style.height = windowHeight + 'px';
可能会引起其它一些副作用，我也正在着手解决这个问题。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
在设计上解决这个问题，不让输入框位于半屏下。万能的传送门：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
focus时让页面滚上去，让输入框露出来呗。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
在高度的布局上写死，overflow:scroll
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
if (/Android/gi.test(navigator.userAgent)) {
console.log('01');
window.addEventListener('resize', function () {
console.log('02');
if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
window.setTimeout(function () {
console.log('03');
document.activeElement.scrollIntoViewIfNeeded();
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
isAndroid是什么呢
该答案已被忽略，原因：
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。}