键盘到上面遮住输入框,怎么解决

发布网友

共5个回答

懂视网

本文主要介绍了HTML5 虚拟键盘出现挡住输入框的解决办法。具有很好的参考价值，下面一起来看下吧

话不多说，请看代码：

//防止键盘把当前输入框给挡住
$$('input[type="text"],textarea').on('click', function () {
 var target = this;
 setTimeout(function(){
 target.scrollIntoViewIfNeeded();
 },100);
});

部分安卓机型适用。

if(/Android [4-6]/.test(navigator.appVersion)) {
 window.addEventListener("resize", function() {
 if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
  window.setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
  },0);
 }
 })
}

热心网友

键盘挡住了输入框，能不能把输入框顶到键盘之上.可以让它显示出来

首先需要在代理方法 - (void)textViewDidBeginEditing:(UITextView *)textView 中来处理。这时需要你移动整个view的frame上移，而不是移动当前的文本框的位置。为了移动效果的流畅，最好把修改frame的动作放到动画里来做 CGRect curFrame=self...

--------------------
IOS中输入框被软键盘遮挡的解决办法
标签： iosuiviewkeyboardfile
做iOS开发时，难免会遇到输入框被键盘遮掩的问题。上网上搜索了很多相关的解决方案，看了很多，但是由衷的觉得太麻烦了。
有的解决方案是将视图上的所有的东西都添加到一个滚动视图对象（ UIScrollView ）中，然后滚动视图实现输入框不被软键盘覆盖，个人觉得此方案好是好，但是太过麻烦。
有的解决方案是通过一个通知 UIKeyboardDidShowNotification 去实现的，需要用到事件监听，而且需要自己定义并实现“将要开始编辑”与“结束编辑”这两个监听事件中的方法。本人也觉得很麻烦。
参考了很多方法，都不是太理想。自己研究了一下，既然软键盘（Keyboard）出现与否是跟输入框（UITextField）紧密关联的。所以自己找到一个解决方案，没有上述两种方案那么麻烦，只需实现代理UITextFieldDelegate中的三个方法即可。
实现方法：
1）将输入框的代理设置为self
（在lb文件中将输入框的delegate设置为File’s Owner 。或者使用代码textField.delegate = self;
2）将输入框所对应的ViewController.h设置实现了UITextFieldDelegate协议
在ViewController.m文件中实现UITextFieldDelegate的三个方法即可：

[cpp] view plain copy
//开始编辑输入框的时候，软键盘出现，执行此事件
-(void)textFieldDidBeginEditing:(UITextField *)textField
{
CGRect frame = textField.frame;
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];

//将视图的Y坐标向上移动offset个单位，以使下面腾出地方用于软键盘的显示
if(offset > 0)
self.view.frame = CGRectMake(0.0f, -offset, self.view.frame.size.width, self.view.frame.size.height);

[UIView commitAnimations];
}

//当用户按下return键或者按回车键，keyboard消失
-(BOOL)textFieldShouldReturn:(UITextField *)textField
{
[textField resignFirstResponder];
return YES;
}

//输入框编辑完成以后，将视图恢复到原始状态
-(void)textFieldDidEndEditing:(UITextField *)textField
{
self.view.frame =CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
}

方法很简单吧？请注意一定不要忘记设置输入框的代理delegate哦

------------------------------
HTML5 虚拟键盘出现挡住输入框的解决办法

下面我们来看一篇关于HTML5 虚拟键盘出现挡住输入框的解决办法,希望这篇文章能够帮助到各位朋友,有兴趣的同学可以进来看看吧.

1，问题描述
我们使用 H5 做移动 App，或者进行移动网站开发时。如果文本输入框在整个页面的下方，当我们点击输入框要输入文字时，系统弹出的虚拟键盘就会将输入框给挡住。（这个只有在Android 系统下会有这个问题，iOS 系统会自动将整个页面上移动。）

2，解决办法
我们可以借助元素的 scrollIntoViewIfNeeded() 方法。这个方法执行后如果当前元素在视口中不可见，则会滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中已经是可见的，这个方法什么也不做。
3，样例代码
这里使用了 jQuery 绑定了所有输入框（textinput、textarea）的点击事件，这样当输入框被点击后就调用它的 scrollIntoViewIfNeeded() 方法，保证输入框可见。（延迟400毫秒出现时有些 Android 手机键盘出现的比较慢）

//防止键盘把当前输入框给挡住
$$('input[type="text"],textarea').on('click', function () {
var target = this;
setTimeout(function(){
target.scrollIntoViewIfNeeded();
console.log('scrollIntoViewIfNeeded');
},400);
});

热心网友

看看输入框的margin属性，可以通过改变外边距调节，看看css样式设置有没有问题，现在在上班，h5,用雷柏V510网版防水背光游戏机械键盘敲代码，舒服。

热心网友

付费内容限时免费查看回答您好～输入法遮住了输入框的处理情况如下：

1、点击手机上的设置并进入

2、选择最下方的-系统

3、找到语言和输入法菜单,继续下一步的设置和修改。

4、点击列表里面的【虚拟键盘】,对手机上安装软件进行设置。

热心网友

关闭输入法的游戏键盘功能。这样输入法弹出后就会把输入框顶起来而不是遮住。

全部栏目

键盘到上面遮住输入框,怎么解决