移动端输入框被手机键盘挡住

在没有定位的情况下,解决输入框被手机键盘挡住时,可以参考:

var loaclHeight = $("section").height();//获取可视宽度
$("input,textarea").focus(function() {
var keyboardHeight = localHeight - $("section").height();//获取键盘的高度
var keyboardY = localHeight - keyboardHeight;
var addBottom = (parseInt($(this).position().top) + parseInt($(this).height()));//文本域的底部
var offset = addBottom - keyboardY;//计算上滑的距离
$("section").scrollTop(offset);
});

时间: 2024-12-05 19:06:52

移动端输入框被手机键盘挡住的相关文章

flutter TextField 输入框被软键盘挡住的解决方案

以前搞ionic1~4的开发中 和react-native   flutter中的机制完全不同, 在flutter 中 当前页面如果存在元素被软键盘挡住 的情况 页面元素的最外层肯定得嵌套一层   SingleChildScrollView body: Container( //SingleChildScrollView 的父级元素得有高度 最外层Container默认 填充全部 child: SingleChildScrollView( ........ ) ) SingleChildScro

微信开发安卓虚拟键盘挡住输入框的问题

是这样的,现在有一个这样的页面: 这个页面刚好一屏幕大小,所以没有滚动条,因为"保存"键上面那个项目备注是需要用户去填写的,当他点击后就会出现虚拟键盘,但安卓手机弹出键盘会遮住这个输入框,以至于用户看不见了.苹果手机天然不会喔,苹果手机的键盘弹出来是占了下面的位置,从而把页面推了上去,整个页面就缩小了就不会出现这样的情况.安卓手机情况如下图: 我不停尝试去解决这个问题,但最终都不成功. 思考一: 如果能模仿苹果一样,当键盘弹出来的时候,将整个页面缩小成页面底部刚好贴着键盘,那就完美了.

Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug

DOM的滚动 DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域,各浏览器实现了相应的方法,可以使用不同的方式控制页面区域的滚动.这些方法作为HTMLElement类型的扩展存在,所以它能在所有元素上使用. 1.scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐.-------目前各浏览器均支持 2.scrollIntoVie

软键盘挡住输入框的解决方案

大家在布局时候,有时候会发现输入框被挡住一部分,能完全显示出来,但是系统自带短信界面 可以完全漂浮在软键盘之上,看了一下短信源码,修改一下输入模式就可以了,源码如下 代码方式:  getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE |                 WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);   xml方式:

Android爬坑之旅:软键盘挡住输入框问题的终极解决方案

前言 开发做得久了,总免不了会遇到各种坑.而在Android开发的路上,『软键盘挡住了输入框』这个坑,可谓是一个旷日持久的巨坑--来来来,我们慢慢看. 入门篇 Base 最基本的情况,如图所示:在页面底部有一个EditText,如果不做任何处理,那么在软键盘弹出的时候,就有可能会挡住EditText.对于这种情况的处理其实很简单,只需要在AndroidManifest文件中对activity设置:android:windowSoftInputMode的值adjustPan或者adjustResi

登录界面,body上有背景图,点击输入框时,弹出的手机键盘会把背景图顶变形,而且会把footer顶上去

js: //防止背景图被手机键盘压缩变形 $(document).ready(function () { $('body').css({'height':$(window).height()}) }); //当点击input出现手机键盘时,窗口大小改变,隐藏footer以防止footer被手机键盘顶上来 $(function(){ var oHeight = $(window).height(); //浏览器当前的高度 $(window).resize(function(){ //当浏览器窗口的

如何解决安卓手机键盘弹出将页面压缩

很多时候项目中我们需要用到输入框input,input聚焦时会调用手机键盘,这个时候我们如果当前页面最大元素宽高写的是实际像素,那是没有问题的,但是如果写的是百分百在安卓机上当前页面就会被向上压缩,但是移动端我们必须做成自适应,我们宽高不能写固定宽高的,那么该如何解决,首先我们可以获取当前手机设备的宽高,然后再给当前页面写宽高,同时加上position:fixed: <style> .page{ position:fixed; left:0; top:0; } </style> v

隐藏虚拟键盘,解决键盘挡住UITextField问题

再正式开始之前,先来介绍一下IOS的键盘类型: 一.键盘风格 UIKit框架支持8种风格键盘 ? 1 2 3 4 5 6 7 8 9 10 typedef enum {      UIKeyboardTypeDefault,                // 默认键盘:支持所有字符       UIKeyboardTypeASCIICapable,           // 支持ASCII的默认键盘       UIKeyboardTypeNumbersAndPunctuation,  //

iOS 键盘挡住UITextField

iOS经常使用的两个功能:点击屏幕和return隐藏虚拟键盘和解决虚拟键盘挡住UITextField的方法 iOS上面对键盘的处理非常不人性化,所以这些功能都须要自己来实现, 首先是点击return和屏幕隐藏键盘 这个首先引用双子座的博客 http://my.oschina.net/plumsoft/blog/42545,他的文章写的非常好.对大家的理解非常有优点. 在 iOS 程序中当想要在文本框中输入数据,轻触文本框会打开键盘.对于 iPad 程序.其键盘有一个button能够用来关闭键盘,