前端工程师,移动Android(安卓)端,html5,css,当input 获得焦点,显示虚拟输入法键盘,使图片变形

html-css08

前端工程师,移动Android(安卓)端,html5,css,当input 获得焦点,显示虚拟输入法键盘,使图片变形,第1张

这是由系统强制产生的效果,在输入法打开的状态下,当前拥有输入焦点的控件一定要出现在当前屏幕的可视范围内(这样产生的效果就是看起来页面好像被输入法的虚拟键盘挤压一样),否则你通过输入法输入的字符都看不到究竟输出到哪里了,大部分人遇到这种情况都会产生一种恐慌的心理,从而造成不良的使用体验。因此这种效果是必须的,没有解决方案。如果你想让文本框在输入数据的时候其他元素也要出现在屏幕上(比如你图片中的那个圆角按钮),你可以把这些元素做成绝对定位或固定定位的,这样在页面被挤压时候它们也会被顶上来。

js 移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局。这时候Android可以监听resize事件,代码如下,而ios没有相关事件。var winHeight = $(window).height() //获取当前页面高度$(window).resize(function(){ var thisHeight=$(this).height() if(winHeight - thisHeight >50){ //当软键盘弹出,在这里面操作}else{//当软键盘收起,在此处操作}})/*** 解决ios键盘弹出遮挡input*/function iosInput() {if(isIos()){$('.chart-footer').css('position','absolute')//解决第三方软键盘唤起时底部input输入框被遮挡问题var bfscrolltop = document.body.scrollTop//获取软键盘唤起前浏览器滚动部分的高度$(".chart-input").focus(function(){//在这里‘input.inputframe’是我的底部输入栏的输入框,当它获取焦点时触发事件interval = setInterval(function(){//设置一个计时器,时间设置与软键盘弹出所需时间相近document.body.scrollTop = document.body.scrollHeight//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度},100)}).blur(function(){//设定输入框失去焦点时的事件clearInterval(interval)//清除计时器document.body.scrollTop = bfscrolltop//将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度})}}iosInput()

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

首先需要在代理方法 - (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)

})