解决方案1:
在各个的input输入框用标签包起来,例如:
<form action=”javascript:void(0);”>
<input />
</form>
解决方案2:
在于你的布局,可以用定位position:fixed;来做处理,因为他相对于页面来说,定位于屏幕一定的位置。
以下代码用于直接将文档流中的元素移动到视区内,Android5.0+有效(只测了5.0和5.1,其他未知),IOS没测过。
element.scrollIntoView();
监听input元素的focus事件,以及window的resize事件。因为focus事件将在resize事件前触发。
在resize事件中,获得浏览器可视区域的top和bottom。获得浏览器可视区域的位置:
var viewTop = $(window).scrollTop(), // 可视区域顶部
// 可视区域底部
// 不使用jQuery
var 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; // 元素底部位置
小结一下:
从上面的代码中看到其实:
判断元素是否在可视区域内,直接使用element.getBoundingClientRect()
就好。
// 调整视窗位置
$(window).scrollTop(value); // 调整value
// 不使用jQuery
window.scrollTo(0, value); // 调整value调整到想要的效果。
解决方案3:
//输入框获得焦点时,文字隐藏
$(".targetInput").focus(function(){
$(".state_fixed").hide();
})
//输入框失去焦点时,文字显示
$(".targetInput").blur(function(){
$(".state_fixed").show();
})
解决方案4:(针对于Android部分手机不能用以上方法时)
在Android代码中设置:
<activity
android:name="com.ideal.studys.EditTime"
android:label="@string/app_name"
android:windowSoftInputMode="stateHidden|adjustResize" >
</activity>
PS: Android中布局中分为,全屏显示与页眉显示,设置其为页眉显示。 详细请查阅:http://blog.csdn.net/moruna/article/details/7879069