针对软键盘挡住input输入框的问题

思想是:注册登录的高度自适应,在页面加载完成时,设定页面高度为可视区的高度,在js里检测安卓还是苹果,苹果不用做操作,安卓则隐藏input框上面的logo,

//软键盘

$(function(){

//本来body设置100%,防止body变化,设置body高度为可视区域高度;

$(‘body,html‘).height(window.innerHeight);

// 对手机是安卓进行变化

if(browser.versions.android){

$(‘.inputText‘).focus(function() {

$(‘#show_login‘).hide();

$(‘footer‘).hide();

});

$(‘.inputText‘).blur(function() {

$(‘#show_login‘).show();

$(‘footer‘).show();

});

}

});

var browser = {

versions: function() {

var u = navigator.userAgent, app = navigator.appVersion;

return {//移动终端浏览器版本信息

trident: u.indexOf(‘Trident‘) > -1, //IE内核

presto: u.indexOf(‘Presto‘) > -1, //opera内核

webKit: u.indexOf(‘AppleWebKit‘) > -1, //苹果、谷歌内核

gecko: u.indexOf(‘Gecko‘) > -1 && u.indexOf(‘KHTML‘) == -1, //火狐内核

mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端

ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端

android: u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1, //android终端或者uc浏览器

iPhone: u.indexOf(‘iPhone‘) > -1 || u.indexOf(‘Mac‘) > -1, //是否为iPhone或者QQHD浏览器

iPad: u.indexOf(‘iPad‘) > -1, //是否iPad

webApp: u.indexOf(‘Safari‘) == -1 //是否web应该程序,没有头部与底部

};

}(),

language: (navigator.browserLanguage || navigator.language).toLowerCase()

}

时间: 2024-10-09 03:59:00

针对软键盘挡住input输入框的问题的相关文章

手机软键盘挡住了输入框解决方法

$("input").focus(function () { var num = $(this).offset().top; $("html,body").animate({scrollTop: num}, 800); }); //关键代码 $("input").focus(function () { var num = $(this).offset().top; setTimeout(function () { $("body,htm

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

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

input页面居中,软键盘覆盖input

input框位于底部 对于ios的软键盘遮盖input输入框问题,网上已经有了一些解决办法,无非就是改变布局,再加scroll.js插件实现滚动, input框位于顶部 这种情况不会出现问题, input居中+mui区域滚动, 此为巨坑,坑了我足足一天的时间, <div class="mui-scroll-wrappe"> <input /> </div> input居中且放于区域滚动中,获取焦点,软键盘遮盖iput,input输入值才把页面滚动上去

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

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

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

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

EditText底部边框被软键盘挡住的问题

最近有同事问我EditText底边被软键盘挡住的问题,主要是EditText布局在屏幕偏下方或底部时,软键盘顶上去后,EditText底边会被挡住一点,从视觉上有强迫症的话比较难接受,只能改!!! 问题原因是:EditText由开发人员给background设置了自定义的shape才导致的,但是shape应用到其它控件上没有问题,看了代码也没什么问题,很纠结! 解决方法:修改shape思路,如下: <?xml version="1.0" encoding="utf-8&

解决 Android 软键盘挡住输入框的问题

当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 下面提供三种解决办法:    方法一:在你的activity中的对应的java文件中oncreate中setContentView之前写上这个代码getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN); 该方法是最简单的    方法二:在 项目的Andro

IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input

移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题! 1.页面没有点击底部input的初始状态 2.安卓手机下的样子,一切都是那么的正常,简直是完美. 3.ios手机下,就是这么任性,没有办法,完全挡着了,挡着了,挡着了...,必须把整个页面滑到最底下才能看见它,捉迷藏啊简直是. 不怕丢人的说,此问题遇见一年多了终于得到完美解决,更加精彩.更加狗血的是代码只有特么的一行! 请睁大眼睛看 <script

软键盘挡住自定义对话框中的内容

在自定义的对话框中有EditText,获取焦点的时候弹出软键盘很可能会挡住对话框中的一些按钮或其他内容. 可以在自定义对话框中的oncreate()方法中设置软键盘的模式,如下 getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE |                WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN); 当软键盘弹出时,弹出