求解：关于H5页面，在手机上点击input输入框，弹出输入法会将页面挤压上去，如何解决？
[问题点数：50分，结帖人yshx1990]
本版专家分：0
结帖率 100%
CSDN今日推荐
本版专家分：21087
2015年8月优秀小版主2015年5月优秀小版主2015年4月html5优秀版主
2015年7月 Web 开发大版内专家分月排行榜第三
本版专家分：0
本版专家分：25
本版专家分：0
匿名用户不能发表回复！|
其他相关推荐用div做的输入框，移动端怎么样点击后调用输入法。_百度知道
用div做的输入框，移动端怎么样点击后调用输入法。
您的回答被采纳后将获得：
系统奖励15（财富值+成长值）+难题奖励20（财富值+成长值）+提问者悬赏10（财富值+成长值）
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
用jquery 来实现很简单，div 的“进度”就是本身百分比长度，对吧，123&div class=&progress-wrp&&
&div class=&progress&&&/div&&/div&123456var w_width = $('.progress-wrp').width();//拿到容器宽度，即为进度条总长度$('.progress').click(function(){ //点击进度条
var width = $(this).width(), //获得自身宽度
Math.round(width/w_width*100); //得到百分比
console.log(per);//打印到控制台 });想要得到进度必须借助js,而jquery是比较省事的做法。其实你可以在进度条改变的时候，定义一个变量实时取值，点击时候直接输出，这样就不用点击后在求值了。
就是说，我点击以后会不会自动调用
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。44 条评论分享收藏感谢收起评论-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以及虚拟键盘相关
阅读(...) 评论()jquery实现页面虚拟键盘特效
转载 &更新时间：日 14:42:26 & 投稿：hebedich
本文实例讲述了jquery比较简洁的软键盘特效实现方法。而且带有数字与字母切换功能，效果非常不错，分享给大家供大家参考。
用法简介：
jquery页面虚拟键盘设计带有数字与字母切换功能。
文件引用：
//给输入的密码框添加新值
function addValue(newValue)
CapsLockValue==0?$(".input_cur").val($(".shuru").val()+ newValue):$(".input_cur").val($(".shuru").val()+ newValue.toUpperCase())
function clearValue()
$(".input_cur").val("");
//实现BackSpace键的功能
function backspace()
var longnum=$(".input_cur").val().
num=$(".input_cur").val().substr(0,longnum-1);
$(".input_cur").val(num);
function changePanl(oj){
$("#"+oj).siblings("div").hide();
$("#"+oj).show();
//设置是否大写的值
function setCapsLock(o)
if (CapsLockValue==0){
CapsLockValue=1;
$(o).val("转化小写");
$.each($(".i_button_zm"),function(b, c) {
$(c).val($(c).val().toUpperCase());
CapsLockValue=0;
$(o).val("转化大写");
$.each($(".i_button_zm"),function(b, c) {
$(c).val($(c).val().toLowerCase());
window.onload=function(){
// changePanl("zimu");
.softkeyboard{ display:inline-}
.softkeyboard td{ padding:4}
.c_panel{ background-color:#333; text-align: padding:15}
.input_cur{ border:1px solid #f00;}
.i_button{ border: height:40 width:50 font-size:16 font-family:"微软雅黑"; background-color:#666; color:#}
.i_button:active{ background-color:#999;}
.i_button_num{}
.i_button_btn{ float: width:88}
.i_button_bs{ float: width:148}
&input type="text" name="text1" class="shuru input_cur" &&br&
//定义当前是否大写的状态
var CapsLockValue=0;
var curEditN
//document.write (' &DIV align=center id=\"softkeyboard\" name=\"softkeyboard\" style=\"position: left:300 top:320 width:517 z-index:180;display:none\"&');
document.write (' &DIV class=\"softkeyboard\" id=\"softkeyboard\" name=\"softkeyboard\" style=\"display:; \"&');
//document.write (' ------数字----');
document.write (' &div class=\"c_panel shuzi\" id="shuzi"&');
document.write ('&table align=\"center\" width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"&');
document.write (' &tr& ');
document.write (' &td&&input class="i_button i_button_num" type=button onclick=\"addValue(\'7\');\" value=\" 7 \"&&/td&');
document.write (' &td&&input class="i_button i_button_num" type=button onclick=\"addValue(\'8\');\" value=\" 8 \"&&/td&');
document.write (' &td&&input class="i_button i_button_num" type=button onclick=\"addValue(\'9\');\" value=\" 9 \"&&/td&');
document.write (' &td&&input class="i_button i_button_btn i_button_sz" onclick=\"changePanl(\'zimu\');\" type=button value=符号 &&/td&');
document.write (' &/tr&');
document.write (' &tr& ');
document.write (' &td&&input class="i_button i_button_num" type=button onclick=\"addValue(\'4\');\" value=\" 4 \"&&/td&');
document.write (' &td&&input class="i_button i_button_num" type=button onclick=\"addValue(\'5\');\" value=\" 5 \"&&/td&');
document.write (' &td&&input class="i_button i_button_num" type=button onclick=\"addValue(\'6\');\" value=\" 6 \"&&/td&');
document.write (' &td&&input class="i_button i_button_btn i_button_sz" onclick=\"changePanl(\'zimu\');\" type=button value=字母&&/td&');
document.write (' &/tr&');
document.write (' &tr& ');
document.write (' &td&&input class="i_button i_button_num" type=button onclick=\"addValue(\'1\');\" value=\" 1 \"&&/td&');
document.write (' &td&&input class="i_button i_button_num" type=button onclick=\"addValue(\'2\');\" value=\" 2 \"&&/td&');
document.write (' &td&&input class="i_button i_button_num" type=button onclick=\"addValue(\'3\');\" value=\" 3 \"&&/td&');
document.write (' &td&&input class="i_button i_button_btn" type=button onclick=\"clearValue();\" value=清空 &&/td&');
document.write (' &/tr&');
document.write (' &tr& ');
document.write (' &td&&input class="i_button i_button_num" type=button onclick=\"addValue(\'0\');\" value=\" 0 \"&&/td&');
document.write (' &td&&/td&');
document.write (' &td colspan=2&&input class="i_button i_button_bs" type=button value=\" BackSpace\" onclick=\"backspace();\"&&/td&');
document.write (' &/tr&');
document.write (' &/table&');
document.write ('&/DIV&');
//document.write ('--------------------------------------------');
//document.write (' ------字母----');
document.write (' &div class=\"c_panel zimu\" id=\"zimu\" style=\"display:\"&');
document.write (' &table align=\"center\" width=\"98%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"&');
document.write (' &tr& ');
document.write (' &td&&input class="i_button i_button_fh" type=button onclick=\"addValue(\'~\');\" value=\" ~ \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onclick=\"addValue(\'!\');\" value=\" ! \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onclick=\"addValue(\'@\');\" value=\" @ \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onclick=\"addValue(\'#\');\" value=\" # \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onclick=\"addValue(\'$\');\" value=\" $ \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onclick=\"addValue(\'%\');\" value=\" % \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onclick=\"addValue(\'^\');\" value=\" ^ \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onclick=\"addValue(\'*\');\" value=\" * \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onclick=\"addValue(\'(\');\" value=\" ( \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onclick=\"addValue(\')\');\" value=\" ) \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onclick=\"addValue(\'-\');\" value=\" - \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onclick=\"addValue(\'+\');\" value=\" + \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onclick=\"addValue(\'=\');\" value=\" = \"&&/td&');
document.write (' &td&&input class="i_button i_button_btn" type=button onclick=\"changePanl(\'shuzi\');\" value=\"切换数字\"&&/td&');
document.write (' &/tr&');
document.write (' &tr& ');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'q\');\" value=\" q \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'w\');\" value=\" w \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'e\');\" value=\" e \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'r\');\" value=\" r \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'t\');\" value=\" t \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'y\');\" value=\" y \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'u\');\" value=\" u \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'i\');\" value=\" i \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'o\');\" value=\" o \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'p\');\" value=\" p \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onClick=\"addValue(\'[\');\" value=\" [ \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onClick=\"addValue(\']\');\" value=\" ] \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onClick=\"addValue(\'{\');\" value=\" { \"&&/td&');
document.write (' &td&&input class="i_button i_button_btn" type=button onClick=\"setCapsLock(this);\" value=\"切换大写\"&&/td&');
document.write (' &/tr&');
document.write (' &tr& ');
document.write (' &td&&input class="i_button i_button_fh" type=button onClick=\"addValue(\'|\');\" value=\" | \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'a\');\" value=\" a \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'s\');\" value=\" s \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'d\');\" value=\" d \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'f\');\" value=\" f \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'g\');\" value=\" g \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'h\');\" value=\" h \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'j\');\" value=\" j \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'k\');\" value=\" k \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'l\');\" value=\" l \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onclick=\"addValue(\';\');\" value=\" ; \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onclick=\"addValue(\':\');\" value=\" : \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onClick=\"addValue(\'}\');\" value=\" } \"&&/td&');
document.write (' &td&&input class="i_button i_button_btn" type=button onclick=\"clearValue();\" value=清空 &&/td&');
document.write (' &/tr&');
document.write (' &tr& ');
document.write (' &td&&input class="i_button i_button_fh" type=button onclick=\"addValue(\'_\');\" value=\" _ \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'z\');\" value=\" z \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'x\');\" value=\" x \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'c\');\" value=\" c \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'v\');\" value=\" v \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'b\');\" value=\" b \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'n\');\" value=\" n \"&&/td&');
document.write (' &td&&input class="i_button i_button_zm" type=button onclick=\"addValue(\'m\');\" value=\" m \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onClick=\"addValue(\'&\');\" value=\" & \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onClick=\"addValue(\'&\');\" value=\" & \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onClick=\"addValue(\'/\');\" value=\" / \"&&/td&');
document.write (' &td&&input class="i_button i_button_fh" type=button onClick=\"addValue(\'?\');\" value=\" ? \"&&/td&');
document.write (' &td colspan=2&&input class="i_button i_button_bs" type=button value=\" BackSpace\" onclick=\"backspace();\"&&/td&');
document.write (' &/tr&');
document.write (' &/table&');
document.write (' &/div&');
//document.write ('--------------------------------------------');
document.write ('&/DIV&');
//给输入的密码框添加新值
function addValue(newValue)
CapsLockValue==0?$(".input_cur").val($(".shuru").val()+ newValue):$(".input_cur").val($(".shuru").val()+ newValue.toUpperCase())
function clearValue()
$(".input_cur").val("");
//实现BackSpace键的功能
function backspace()
var longnum=$(".input_cur").val().
num=$(".input_cur").val().substr(0,longnum-1);
$(".input_cur").val(num);
function changePanl(oj){
$("#"+oj).siblings("div").hide();
$("#"+oj).show();
//设置是否大写的值
function setCapsLock(o)
if (CapsLockValue==0){
CapsLockValue=1;
$(o).val("转化小写");
$.each($(".i_button_zm"),function(b, c) {
$(c).val($(c).val().toUpperCase());
CapsLockValue=0;
$(o).val("转化大写");
$.each($(".i_button_zm"),function(b, c) {
$(c).val($(c).val().toLowerCase());
window.onload=function(){
// changePanl("zimu");
演示效果：
屏幕键盘在网络生活中很常见，比如使用网银或在线查询信用卡余额，在输入密码等敏感数据时，应该就会用到屏幕键盘。以防止被木马或恶意程序捕获盗取实际键盘上的操作。希望本文能够对大家有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}