其他回答(2)
你应该把代码贴上来。
园豆：1010
园豆：1010
你把代码贴上来，或者发一段这种效果的url地址，让大家帮你看看。
&&&您需要以后才能回答，未注册用户请先。今天看啥 热点：
input输入框中的光标大小显示不一致，input输入框
input输入框中的光标大小显示不一致
ie7中和chrome的非常明显
先看看问题产生的原因：chrome浏览器对光标高度的设置原则为，当没有内容的时候光标的高度=input的line-height的值，当有内容时，光标从input的顶端到文字的底部。
OK，既然知道了原因，我们就相应才去一些措施。尝试了两种方法去做:。
方法1：将line-height的值设置为跟字体大小一致；如果高度达不到，用padding去撑；
方法2：对chrome不设置line-height，它会自动文字居中，对ie进行hack设置line-height的值以保证文字垂直居中；这里要注意一下，如果在reset的样式文件中有设置line-height等值，请进行line-height的重置，可以用line-height:normal。具体可以看看腾讯好莱坞页面的搜索框。
height: 34
font-size: 12
line-height:
line-height: 34px\9;
用样式加内补丁.&input type=&text& style=&padding-left:5&&
以前在项目里碰到过一个问题input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中，在FF下出现的情况是：点击input时，输入光标其实上跟input的height一样高，但当开始输入文字时，光标又变得跟文字一样高，chrome下光标跟input的height一样高，而IE下光标跟文字的大小一致。初步结论如下：IE：不管该行有没有文字，光标高度与font-size一致。FF：该行有文字时，光标高度与font-size一致。该行无文字时，光标高度与input的height一致。Chrome：该行无文字时，光标高度与line-height一致；该行有文字时，光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候)，如果没有line-height，则是与font-size一致。解决的方案：
暂无相关文章
相关搜索：
相关阅读：
相关频道：
&&&&&&&&&&&&&&&&&&
WEB前端教程最近更新2502人阅读
&script type=&text/javascript&&
function textChanged()
document.getElementById('input2').value=
document.getElementById('input1').
&input type=&text& id=&input1& onkeyup=&javascript:textChanged()& /& &input type=&text& id=&input2& /&
这样子便能实现动态的改变text2文本框的值.
补：下拉框触发事件： onchang
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：241447次
积分：4152
积分：4152
排名：第4985名
原创：175篇
转载：23篇
评论：115条
(1)(1)(1)(2)(3)(5)(23)(14)(7)(5)(4)(59)(34)(1)(3)(14)(21)如何让Input撑满整个div,高度一样，当时input下沉了1px,求解
[问题点数：20分，结帖人zhouzilong]
如何让Input撑满整个div,高度一样，当时input下沉了1px,求解
[问题点数：20分，结帖人zhouzilong]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2013年4月 Web 开发大版内专家分月排行榜第三
2013年4月 Web 开发大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。移动web页面，input获取焦点弹出系统虚拟键盘时，挡住input，求解决方案？
移动web页面，inpu获取焦点弹出系统虚拟键盘时，挡住input，求解决方案？&br&&img src=&/f78fa9cdcbcf0a24dca030_b.png& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/f78fa9cdcbcf0a24dca030_r.png&&&img src=&/b4ea5c147cb38e39aa04_b.png& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/b4ea5c147cb38e39aa04_r.png&&
移动web页面，inpu获取焦点弹出系统虚拟键盘时，挡住input，求解决方案？…
按投票排序
当虚拟键盘弹出的时候，window的resize事件会被触发（至少我的Android手机是这样）问题里的input是使用position:fixed吗，如果是position: fixed，在resize触发时应该会自动调整位置吧。// 以下代码用于直接将文档流中的元素移动到视区内，Android5.0+有效(只测了5.0和5.1，其他未知)，IOS没测过。element.scrollIntoView()
====================================================================监听input元素的focus事件，以及window的resize事件。因为focus事件将在resize事件前触发。在focus事件中，将获得焦点的input元素保存变量中。在resize事件中，获得浏览器可视区域的top和bottom。获得浏览器可视区域的位置：var viewTop = $(window).scrollTop(),
// 可视区域顶部
viewBottom = viewTop + window.innerHeight;
// 可视区域底部
// 不使用jQueryvar viewTop = document.body.scrollTop,
viewBottom = viewTop + window.innerHeight;
获得元素的在文档中的位置：var elementTop = $element.offset().top, // $element是保存的input
elementBottom = elementTop + $element.height();
// 不使用jQuery/* 获得元素的位置信息 */
var getElementPosition = function(elem) {
var defaultRect = {top: 0, left: 0};
var rect = (elem.getBoundingClientRect && elem.getBoundingClientRect()) || defaultRect;
var ret = {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
return ret;
var elementTop = getElementPosition(element).top, // 元素顶部位置
elementBottom = elementTop + element.clientHeight; // 元素底部位置
// 小结一下document.body.scrollTop获得当前body滚动的位置。getBoundingClientRect()获得element相对于viewport的位置从上面的代码中看到其实：判断元素是否在可视区域内，直接使用element.getBoundingClientRect()就好(*￣?￣*) 调整视窗位置$(window).scrollTop(value); // 调整value
// 不使用jQuerywindow.scrollTo(0, value); // 调整value
调整到想要的效果。我的Android手机上，当input获得焦点的时候，浏览器好像会自动移动input到可视区域内。_(:з」∠)_
聚焦时动态计算，改变 input 的位置。弹出键盘肯定是对 input 触发了一些操作，肯定会有 focus、click 之类的事件抛出。其他回答中提到的 window resize 也可能会触发（要看安卓机器）。触发之后 scroll 一下或者计算下位置重新设置下应该就差不多了。键盘弹出来了之后，通常相当于窗口高度变低了。iOS 会自动滚动上去一段，安卓的表现就不一致了，页面高度变低了，又没有自动滚上去，下面的内容就会被截断了。至于 fixed 失效这个问题，就是比较麻烦的兼容性问题了，需要针对性处理。
resize的时候计算屏幕高度，修改input的定位。实际上很多系统在处理这个键盘弹出的时候各种各样，需要调试。。不过resize在手机上有各种问题。。还是focus吧
最后的解决方案是好input聚焦时，控制滚动条位置，控制动作必须延迟执行，虚拟键盘弹出动作是有时间过程的。
使用flex布局能解决这个问题！codepen上做得demo:自己在ipad和小米note上自测没问题。
这种wap聊天室把我坑得够惨，我用fixed布局，发现问题有无数，于是改成了flex和box布局，用各种手机和独立浏览器测试了都没有问题，然后放在我们公司的app里一测，又挡住了、、、app里的虚拟键盘的表现就好像是个z-index无数大的fixed元素盖在了页面上，这特么让我如何是好？万般无奈之下只能改方案，点击输入框的时候，用一个大的textarea覆盖在整个页面上。。。为何前端如此之苦，为何要针对那么多手机进行适配！！！为什么手机厂商没有一个统一的标准！！！为什么啊为什么！！！！
这是我近期对IOS上遇见类似问题的解决方法，安卓上还有特殊情况没处理这是在ios 还好的demoIOS键盘弹出fixed布局必定失效，各种凌乱，所以类似固定底部输入框的还是换个方式的好再就是页面上input被弹出的键盘挡住，IOS 是不会触发resize 还得用focus 触发位置计算，不过要注意，用第三方输入法的，IOS上输入发的弹出是有延迟的，在focus后，根本没办法监测，只能setTimeout，很是痛心啊，还有建议将元素移动到可视区域最好是整个页面CSS位移，因为页面不够高的时候安卓上滚动不了呢。
我也是这个问题
苹果原生的ok 但是
如果是别的输入法
但是不可能让用户只用原生的 所以产品说必须解决
但是到现在还没解决？不知道何解
刚刚可以用事件控制ios的focus 但是没有试
我也遇到这样子的问题，web移动端开发，用了各种方式都解决不了，fixed定位，scrolltop等...求哪位大神赐教
这里也遇到了相同的问题，监测事件来隐藏footer按钮
但还是 在input在页面相对下方的位置的时候 触发不了事件
大神 有没什么好办法
已有帐号？
无法登录？
社交帐号登录