移动端手机输入法挡住输入框弹出后遮挡输入框怎么处理？

来源：蜘蛛抓取(WebSpider) 时间：2017-09-24 13:36 标签： 微信端点击弹出输入法
输入关键字或相关内容进行搜索
PC连接手机端测试时并没有出现这个问题，但是在打包后，安装到手机端，出现了输入法遮挡输入框这个问题。
起初在考虑利用软键盘弹出的监听，监听弹出后计算软键盘高度，使输入域的高度距离底部增加出一个软键盘的高度即可。
但在实现的过程中，又觉得是滚动条影响了这个输入框的显示，所以想利用刷新滚动条的方式解决一下试试，结果是可以的。
将这段代码放在index.html下的js方法中。
代码如下：mui('.mui-scroll-wrapper').scroll({
bounce: true,
indicators: true, //是否显示滚动条
deceleration: 0.0003
mui(&.mui-scroll-wrapper&).scroll().refresh();
\n参考的实例是这个问题：http://ask./question/15866
应该放在哪里？我放到了页面的引用js代码处但是没有效果。
应该是那个js？
你好能贴一下完整代码吗？我也遇到这个问题，但是把你写的这段代码放进去，没有任何效果，我不制动啊是不是我添加的位置不对还是其他原因，想对比一下你的写法
你的引用文件引用对了么？这个错是找不到你调用的方法
TypeError: mui('.mui-scroll-wrapper').scroll().refresh is not a function. (In 'mui('.mui-scroll-wrapper').scroll().refresh()', 'mui('.mui-scroll-wrapper').scroll().refresh' is undefined)
这是我的代码：
mui('.mui-scroll-wrapper').scroll().refresh();
为什么我的刷新无效呢，界面是tab可以所有滑动的slider，此时mui(&.mui-scroll-wrapper&)返回时数组
使用mui(mui(&.mui-scroll-wrapper&)[1]).scroll().refresh(); 其中索引1表示，我的输入框在这个页签下，如上方法，无效果，还是被遮挡，盼赐教。
我刚遇到这个问题，也是用的这个代码，OK了，呵呵
要回复文章请先或[iOS]解决键盘弹出时挡住输入框的问题
做ios的时候总会遇到这样打问题：用户点了文本输入框之后键盘遮挡住了原来输入的位置。
为了解决这个问题，具体需要一下几步：
1.给当前的UIViewController添加委托
@interface SignupViewController : UIViewController
2.在xib或storyboard里面将textfield的delegate与controller相连
3.在m文件里实现委托的方法
vcD4KPHA+PGJyPgo8L3A+CjxwPjxwcmUgY2xhc3M9"brush:">- (BOOL)textFieldShouldReturn:(UITextField *)textField
// When the user presses return, take focus away from the text field so that the keyboard is dismissed.
NSTimeInterval animationDuration = 0.30f;
[UIView beginAnimations:@"ResizeForKeyboard" context:nil];
[UIView setAnimationDuration:animationDuration];
CGRect rect = CGRectMake(0.0f, 0.0f, self.view.frame.size.width, self.view.frame.size.height);
self.view.frame =
[UIView commitAnimations];
[textField resignFirstResponder];
return YES;
- (void)textFieldDidBeginEditing:(UITextField *)textField
CGRect frame = textField.
int offset = frame.origin.y + 32 - (self.view.frame.size.height - 216.0);//键盘高度216
NSTimeInterval animationDuration = 0.30f;
[UIView beginAnimations:@"ResizeForKeyBoard" context:nil];
[UIView setAnimationDuration:animationDuration];
float width = self.view.frame.size.
float height = self.view.frame.size.
if(offset > 0)
CGRect rect = CGRectMake(0.0f, -offset,width,height);
self.view.frame =
[UIView commitAnimations];移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移
时间： 12:08:37
&&&& 阅读：1662
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&一、mui框架中点击input后，安卓手机弹出自带的输入键盘时，页面自动上移
实现方法：
（1）只要把input标签放在mui-content这个类里面就可以了
&div class="mui-content"&
&input .../&
注意：在有些情况下不适用，当把input标签放入mui-scroll中就不行了，也就是说mui-content和mui-scroll同时存在时不适用
&div class="mui-content"&
&div class="mui-scroll-wrapper"&
&div class="mui-scroll"&
　　　　　　&input ... /&
　　　　 &/div&
（2）使用js方法进行解决，在body中添加
&body onresize="document.activeElement.scrollIntoView(true);"&
注意：表单不能添加padding和margin样式，不然回滚会反弹标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！& & & 做过hybrid&app的朋友都会使用这样过这样的开发模式，app是原生的，里面的内容是移动web。以安卓为例，安卓app里面内容会使用一个webview控件来加载移动web，webview控件设置了全屏。那么问题来了，假如是一个表单页面，里面有很多的输入框，点击最顶部的输入框的时候，移动端的输入法就会挡住最底部的输入框，无法看到输入框里面的内容。
& & & 如何解决，请看一下代码：
&!DOCTYPE html&
&meta charset="utf-8" /&
&meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"&
&title&移动端输入法挡住输入框&/title&
width: 100%;
line-height: 1.5rem;
border: 1px solid red;
.block-fill {
height: 500px;
&div id="main"&
&!--占位div--&
&div class="block-fill"&&/div&
&!--需要聚焦--&
&input id="input" type="text"&&/input&
//获取页面高度
var clientHeight = document.body.clientH
//设置监听聚焦事件
document.body.addEventListener("focus", function(e) {
var focusElem = document.getElementById('input')
//设置监听窗口变化时间
window.addEventListener("resize", function() {
if(focusElem && document.body.clientHeight & clientHeight) {
//使用scrollIntoView方法来控制输入框
focusElem.scrollIntoView(false);
& & & & &通过js就很轻松的解决这个问题。（我开始以为需要app那边去设置）
阅读(...) 评论()

我要回帖

更多关于 微信端点击弹出输入法 的文章

 

随机推荐