失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 解决html中手机键盘遮挡input输入框

解决html中手机键盘遮挡input输入框

时间:2022-08-19 12:58:29

相关推荐

解决html中手机键盘遮挡input输入框

多读多写多记录,多学多练多思考。 ---------- Banana.Banuit(香柚帮)

解决方法:

scrollIntoView(alignWithTop):滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。

alignWithTop若为true,或者什么都不传,那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐;

alignWithTop若为false,调用元素会尽可能全部出现在视口中,可能的话,调用元素的底部会与视口顶部平齐,不过顶部不一定平齐。

支持的浏览器:IE、Chrome、Firefox、Safari和Opera。

该方法是唯一一个所有浏览器都支持的方法,类似还有如下方法,但是只有在Chrome和Safari有效:

scrollIntoViewIfNeeded(alignCenter)

scrollByLines(LineCount)

代码如下:

//input输入框简例<input type="text" name="username" onclick="topScrollInput(this);"/><input type="password" name="password" onclick="topScrollInput(this);"/>//js简例function topScrollInput(obj) {var target = obj;//使用定时器让输入框上滑时更加自然setTimeout(function(){target.scrollIntoView(true);},100);}

如果觉得《解决html中手机键盘遮挡input输入框》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。