评论-4161&
今天来公司的主要目的就是研究虚拟键盘与fixed的问题，期间因为同事问起闭包与事件委托（阻止冒泡）相关问题，便穿插了一篇别的：
，有兴趣的朋友可以去看看，因为首页只能放一篇，这个就略去了
现在回到主要研究点，首先在移动端我们点击文本框后会出现一个虚拟键盘， 虚拟键盘让页面可视区域得到了充分利用，但是也带来了一些问题
移动端虚拟键盘出现的条件是：文本框（文本类）获得焦点
但是文本框获得焦点未必会弹出键盘！！！
收起虚拟键盘的条件是：文本框失焦
PS：总而言之，我们认为会出现或者消失虚拟键盘的时候都可能不工作
在移动设备上，如果文本框在上方，点击不会有什么问题：在设备的最下面的话，就有所不同了，整个块会上移，以将input区域显示出来
这个时候几个棘手的问题就出现了：
① 虚拟键盘的出现对页面来说是不可知的，这句话的理解是：没有键盘出现事件，没有办法获取键盘高度
② 键盘是&贴&在了viewport上，表面上不会对dom产生&任何&影响，但是这个时候一些定位元素的表现却变得&怪异&
可以看到，无论淘宝或者新浪，这个问题都存在，现在比较普遍的解决方案都是：移动端不采用fixed属性
于是我们来看看是否有其它方案
iscroll是否能解决
其实这个方案在周四的时候我便测试过了，但是结果让人很遗憾
作为官方给出的例子，在虚拟键盘弹出来后，光标会乱跑，这个还可以接受，但是：
① 头部不见了
② 偶尔不能显示获得焦点的input
这两个问题就让人难以接受了，于是，我们需要找到其他方案
其实这个问题如果真要较真的话，我觉得需要深入研究两个知识点：
① viewport的原理
② 虚拟键盘的原理
就我手里现有资源来说，两个知识点一个都不深入，所以只能先从应用层面解决问题
应用层面解决方案
我们想到这么一个场景，如果我们能监控到键盘的行为，如果能的话，我们便可以
① 键盘弹出时候将fixed元素设置为static
② 键盘消失时候将fixed元素设置为fixed
那么我们能吗？？？
虽然这个方案比较恶心，我们还真能......答案是监控dom变化！
监控的方式其实筛选下来也不过两种：
① 时钟setInterval不停监控
② 系统级别的监控，比如键盘出现时候通知window一个事件，但是很遗憾现在还没有这个事件，但是这个事件等于
input类元素获取焦点 == 弹出虚拟键盘
input类元素失去焦点 == 收起虚拟键盘
但是我们前面已经说过，上面的原则不一定可靠，所以该种方案也未必可靠了
基于系统监控这点，我们还可以监控resize事件或者scroll事件，但是经过我的测试，setInterval表现比较好
于是，我们简单写一段代码，可靠是否满足需求：
window.alert = function (msg) {
$('body').append('&div&' + msg + '&/div&')
function fixedWatch(el) {
if(document.activeElement.nodeName == 'INPUT'){
el.css('position', 'static');
el.css('position', 'fixed');
setInterval(function () {
fixedWatch($('#headerview header'));
根据测试结果来说，是满足我们的需求的，这里的header不会出问题，但是footer由于没有处理仍然会错位
于是这个问题似乎被我们修复了，但是你可以接受吗？？？这个方案有一个致命的恶心点！
不停的监控dom变化，浪费资源
那么这个问题可优化么？
似乎是可优化的，但是依旧会带来很多问题，优化的入口与出口便是input标签的focus事件
至于其失焦相关的事件便不予关注了，因为可能由一个input跳到另一个input
setTimeout(function () {
$('#dl_app img').hide();
window.alert = function (msg) {
$('body').append('&div&' + msg + '&/div&')
window.res = null;
var i = 0;
function fixedWatch(el) {
alert(i++);
if(document.activeElement.nodeName == 'INPUT'){
el.css('position', 'static');
el.css('position', 'fixed');
if(window.res ) { clearInterval(window.res ); window.res
$('input').focus(function () {
if(!window.res) {
fixedWatch($('#headerview header'));
window.res = setInterval(function () {
fixedWatch($('#headerview header'));
这样的话，貌似能让代码看上去舒服一点，但是其代价却是所有input类标签都会多一个获得焦点事件，依旧令人痛惜
今天的学习暂时到此，对于虚拟键盘的出现其实可能还有其他的问题，举一个例子来说：
如果我们点击按钮时候会出一个toast在中间，但是虚拟键盘刚好遮住了toast提示信息怎么办呢？这个问题与上述问题其实是一致的
然后这个解决方案的可接受程度，以及其实际是否解决了问题又或者引起了其它问题就需要实际证明了
至于各位有什么好的解决方案，或者想法，可以讨论讨论哦！！！
好了，今天暂时到这里，我们下次继续，如果有可能我们会详细学习下viewport以及虚拟键盘相关
阅读(...) 评论()在移动端，经常会遇到input获得焦点时候弹出的虚拟键盘将整体页面布局打乱的情况。 比如说是这种
&&& 输入框未获得焦点键盘未抬起的时候：
&输入框获得焦点键盘抬起的时候
&&&& 这种情况下，不管是上面的textarea还是下面的input输入框，它们任意一个获得焦点的时候，手机的虚拟键盘都会抬起将fixed定位于屏幕最低端的 &提交&按钮顶到屏幕 &中间&位置，严重影响布局，这就测试人员来看是一个不可饶恕，已经足已被开除的底部，怎么解决这个问题呢？对于布局不是很复杂的 "提交"页面而言，可以采用动态获取底部footer的offset().top 再减去其父元素offset().top ，将其差值当作footer的的margin-top数值的，同时remove掉footer的fixed属性。
&&&&& 具体的解决步骤如下：
&& 将footer 外面包裹一个父级div,赋给其类名 footer-wrap，footer fixed绝对定位与屏幕的底部
&分别获取footer和footer-wrap的offset().top,计算差值，remove掉footer的fixed属性，然后赋值给footer的margin-top
&&&& 键盘抬起后，页面如下：
然后，这个问题就解决了，当然这是对于这种布局非常简单的页面而言，能够做到完美解决不留bug，但是对于更加复杂的页面是否也能过做到完美适配，还不得而知，望各位见谅，待到遇见了这种问题，本人再补充。、
阅读(...) 评论()关于移动端页面弹出框被软键盘遮挡的问题
在移动端页面的开发中，当弹出框内有输入框需要用户输入时，往往会面临这样的一个问题：弹出的软键盘会将输入框遮挡住，不方便用户看到自己输入的内容。如下图输入地址一栏：
移动端中，当软键盘弹出时，会触发一个页面的resize事件，意思就是说，html的高度会发生改变，变成原来的高度和软键盘的高度相差值。由下图也可以看出，弹出框因内容自适应变得差不多要占完一整屏，而当软键盘弹出时，高度值resize后的弹出框的高度显然大于页面的新高度。
大部分弹出框一般使用的是fixed或者absolute定位，结构已脱离文档流，所以即使弹出框的高度大于页面的高度，弹出框超出页面部分也只能被隐藏，即所谓的被软键盘覆盖。
在这样的情况下改如何解决？一来，除了让美工在设计弹框的时候高度不要超过屏幕的一半以外，题主想到了一个思路：
首先背景嵌套内层弹框，背景使用fixed定位top、right、bottom及left都设置为0，让其占据一整个屏幕，其次内层弹出框的div使用absolute定位，top值50%后使用translate往上移动50%保证弹出框垂直居中，而left和right根据设计图设置成一个相同的值，宽高不设定，高度设置一个最大值如最高80%，并将y轴的overflow设置为自动。样式及结构如下。
.floatbox{position:&top:0;&right:0;&bottom:0;&left:0;&background:rgba(0,0,0,0.5);}
.floatbox&div{position:&top:50%;&left:15&right:15&transform:&translate(0,-50%);&-webkit-transform:&translate(0,-50%);&max-height:80%;&overflow-y:&background:#&border-radius:5}
这个方法也有缺陷，当键盘弹出时还是会遮挡住输入框，输入内容时，输入框才会被“提拉”到可见的视区。DEMO可参阅一下二维码，有更好的思路也欢迎跟题主交流。
前端企鹅交流群：
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。css3+jquery制作电脑软键盘效果
下载资源()次
阅读次数()次
发布时间：
用法简介：
css3+jquery制作电脑软键盘效果。文件引用：&script&src=&jquery-1.7.2.js&&&/script&
$(function(){
$(&.numkeyboard&).ioskeyboard({
&&&&keyboardRadix:80,//键盘大小基数，实际大小比为9.4，即设置为100时实际大小为940X330
&&&&keyboardRadixMin:40,//键盘大小的最小值，默认为60，实际大小为564X198
&&&&keyboardRadixChange:true,//是否允许用户改变键盘大小,该功能仅能完美支持Chrome26；仅当keyboardRadixMin不小于60时才较好支持Safari内核浏览器
&&&&clickeve:true,//是否绑定元素click事件
&&&&colorchange:true,//是否开启按键记忆功能，如果开启，将随着按键次数的增加加深相应按键的背景颜色
&&&&colorchangeStep:1,//按键背景颜色改变步伐，采用RBG值，默认为RGB(255,255,255),没按一次三个数字都减去步伐值
&&&&colorchangeMin:154//按键背影颜色的最小值，默认为RGB(154,154,154)
相关标签：
网友评论：
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
什么是邮箱订阅？
邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式，用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮，当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。}