移动端输入框获取焦点后,虚拟键盘弹起,把固定的底部也顶起来了

var homeFootBar = document.querySelector("底部foot")var shortcutVal = document.querySelector("input")shortcutVal.addEventListener("focus", function (e) {    if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){        focusInput()    }})
/*屏幕的高度*/let docHeight = window.innerHeight //function focusInput() {    console.log("安卓手机2")   window.addEventListener(‘resize‘, function() {        console.log("安卓手机3", winHeight  +"==="+window.innerHeight)      if (docHeight> window.innerHeight) {

         /*安卓手机当键盘弹起时设置页面的高度为屏幕的高度*/
         homeFootBar.style.display = ‘none‘            console.log("安卓手机底部消失")            document.getElementsByTagName(‘body‘)[0].setAttribute(‘height‘, winHeight+‘px‘)

      }else {         /*当键盘收起时*/         homeFootBar.style.display = ‘block‘

         document.getElementsByTagName(‘body‘)[0].setAttribute(‘height‘, ‘100%‘)

      }

   })}

原文地址:https://www.cnblogs.com/yangwenbo/p/11691318.html

时间: 2024-10-30 08:41:01

移动端输入框获取焦点后,虚拟键盘弹起,把固定的底部也顶起来了的相关文章

Swift - 点击输入框外部屏幕关闭虚拟键盘

我们如果把文本框的Return Key设置成Done,然后在storyboard中将文本框的Did End On Exit事件在代码里进行关联.同时关联代码里调用文本框的resignFirstResponder()方法.就可以实现用户点击键盘return key时就关闭虚拟键盘. 如果要实现当用户点击文本框之外的舞台屏幕时也能关闭虚拟键盘.这时就要让屏幕的背景响应Touch Down事件. (1)由于背景是UIView控件,不能直接拖拽关联Touch事件.首先要让背景变成UIControl控件.

h5 ios微信浏览器 input获取焦点后,收起软键盘,光标错位

整个页面布局如下: 外层设置fixed的原因是不让页面在浏览器中进行上下拖拽, 最后形成的结果是:输入框获取焦点输入内容后,光标错位,导致不能选中输入框重新获取焦点(页面上移,但是布局未产生影响); 解决 改变页面布局: 外层fixed取消,改用 display:flex布局,将内容分为3部分,中间内容flex-grow: 1; 好了 给input设置fixed或者input的父元素设置fixed 导致此原因 原文地址:https://www.cnblogs.com/bigsister/p/10

android全屏下的输入框未跟随软键盘弹起问题

最近开发中遇到,全屏模式下输入框在底部不会跟随软键盘弹起.于是网上搜索了解决的方案.大致找到了两种方案. 第一种 定义好此类 public class SoftKeyBoardListener { private View rootView;//activity的根视图 int rootViewVisibleHeight;//纪录根视图的显示高度 private OnSoftKeyBoardChangeListener onSoftKeyBoardChangeListener; public S

小技巧|H5禁止手机虚拟键盘弹出

本文首发于我的博客:http://dunizb.com原文地址:http://dunizb.com/2017/09/24/disable-the-phone-virtual-keyboard-up/ 工作中遇到如下需求,点击输入框弹出自定义弹窗,输入框是input标签:但是在移动端,input会默认触发手机的虚拟键盘,如何阻止手机虚拟键盘弹起呢?目前我试过有两个方案,一个是给input添加readonly属性,另一个就是在input事件处理方法前面添加一句document.activeEleme

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

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

移动端输入框固定在底部键盘抬起时遮挡住输入框

移动端开发时输入框使用fixed固定在底部时,抬起键盘会遮挡住输入框 监听输入框获得焦点 $(function(){ $("#pinglun").focus(function(){           //输入框获得焦点 var tHeight = $(document).height();     //获取当前屏幕高度,没用到 console.log('当前屏幕高度='+tHeight) console.log('输入框获得焦点') document.getElementById(&

虚拟键盘冲击移动端fixed布局的解决方案

在做移动端业务开发时,会碰到fixed元素和输入框同时存在的情况.在手机软键盘唤起的情况下,会造成原本fixed定位的元素跟随软键盘而上浮,对整体布局造成冲击.来看这样一个栗子直观的感受一下这个bug. 问题描述: 开发一个创业板转签页面,预期效果图是这样的. 红色矩形区域为使用fixed布局的内容,其css代码为{width:100%;position:fixed;bottom:0;left:0},这看起来并没有什么问题,但在手机软键盘唤起进行输入的时候,红色矩形区域跟随软键盘而浮动起来,这时

移动端input的虚拟键盘影响布局

移动布局经常会使用绝对定位(absolute)和固定定位(fixed)来布局一个层.然后这个层上面会有一些信息,当这个层上面为input时,移动端输入信息则会弹出虚拟键盘,从而会影响我们的布局,给我们带来困扰.经常碰到却很少整理,再次碰到又是一头雾水,趁着这次有空,我把我测试成功的方法记录下来.具体看自己情况应用,纯属个人试验. 情况一.用absolute写的一个层(class名为elayer),层设置有背景颜色,然后层上面布局有input.当点击input软键盘弹出后,这个层向上面移动背景随之

移动端虚拟键盘影响页面布局的问题

问题描述:点击input输入框,虚拟键盘弹出时,若body禁止滚动,在一个页面显示时,body中元素会被压缩变形.若body出现滚动条,则会将整体页面向上移动 解决方法: 1. $(document).ready(function() {    $('body').height($('body')[0].clientHeight); }); 2.$('input').focus(function(){ $('.contact').css('position','static'); }).blur