360浏览器文本框获得焦点后被android软键盘遮罩该怎么办

场景是这样的,站点上筛选按钮点击后弹出层(fixed),当输入框获取焦点以后弹出系统自带的软键盘,在android上十款浏览器挨个测试比对,发现在360浏览器弹出键盘以后获取焦点的文本框被软键盘覆盖了。

截图如下

(未获取软键盘焦点的情况)

(chrome浏览器调起软键盘的情况)

(360浏览器调起软键盘情况)

那么问题来了,浏览器的软键盘显示出来又哪几种情况呢?英文   中文(网上找的)

经过简单的了解,大概分析了一下软键盘在浏览器上弹出应该包含软键盘占用主activity空间,让主activity重新布局 和 不调整窗口大小浮在上面  这两种方式(哈哈这是我yy的)

360应该是使用后者,其他的也许是使用前者。

既然问题出现了,那就要想办法解决,于是经过简单的推敲,基本上可以得出(存在不占用主窗口空间的软键盘技术) 1、当input获取焦点的时候,2、软键盘会弹出,3、fixed的层需要向上移动一下,4、成功输入;5、当input blur或是键盘点击回车以后,fixed还原位置(这里要庆幸360没有默认带旋转屏幕跟随转动,不然还要麻烦一点)

既然分析完毕就要写代码了

1.添加识别浏览器代码

var isSpecialBrowser = navigator.userAgent.match(/360 Aphone.*\(([\d.]+)\)$/i)//360等部分软键盘采用的是软键盘不占用主窗口空间造成,吸底的 input获取焦点的时候被遮罩

2.处理事件

$(document)
 .on('keydown keyup', Element,function(ev) {
   if(code == && isSpecialBrowser) {
     DOM.css('bottom', -);
    }
   }
  })
  .on('focus', Element,function() {
   if(isSpecialBrowser) {
    DOM.css('bottom', -);
   }
  })
  .on('blur', Element,function() {
   if(isSpecialBrowser) {
    DOM.css('bottom', -);
   }
  });

好了,问题解决了

但是会又问题,就是主动点击键盘收起按钮时没办法获取任何keycode和对应的事件,因此这里会有问题。

文本框获得焦点、失去焦点调用JavaScript

代码如下:

<%@ Page Language="VB" CodeFile="focus.aspx.vb" Inherits="focus" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript">
function text1_onmouseover(it)
{
it.focus();
it.select();
it.style.backgroundColor="red";
}
function text1_onmouseout(it)
{
it.onblur;
it.style.backgroundColor="white";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" onmouseover="return text1_onmouseover(this);" onblur="text1_onmouseout(this)" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html> 
(0)

相关推荐

  • Android GridView中包含EditText的焦点重新获取方法

    本文实例讲述了Android GridView中包含EditText的焦点重新获取方法.分享给大家供大家参考,具体如下: 项目中遇到的问题是当界面有刷新时,EditText失去焦点,这时候需要重新获取焦点. EditText editText = (EditText) mGridView.findViewById(R.id.gridview_edittext_item); //gridview_edittext_item 是放在对应的adapter的xml文件中的 if (editText !=

  • Android取消EditText自动获取默认焦点

    最近在通讯录新建联系人=中,一进入一个页面, EditText默认就会自动获取焦点,很是郁闷, 如何让EditText不自动获取焦点? 那么如何取消这个默认行为呢? 在网上找了好久,有点监听软键盘事件,有点调用clearFouse()方法,但是测试了都没有!xml中也找不到相应的属性可以关闭这个默认行为 解决之道:在EditText的父级控件中找一个,设置成 android:focusable="true" android:focusableInTouchMode="true

  • Android取消EditText自动获取焦点默认行为

    在项目中,一进入一个页面, EditText默认就会自动获取焦点. 那么如何取消这个默认行为呢? 在网上找了好久,有点 监听软键盘事件,有点 调用 clearFouse()方法,但是测试了都没有! xml中也找不到相应的属性可以关闭这个默认行为 解决之道:在EditText的父级控件中找一个,设置成 复制代码 代码如下: android:focusable="true" android:focusableInTouchMode="true" 这样,就把EditTex

  • Android给自定义按键添加广播和通过广播给当前焦点输入框赋值

    一.给自定义按键添加广播 修改PhoneWindowManager.java中的interceptKeyBeforeDispatching方法 /frameworks/base/policy/src/com/android/internal/policy/impl/PhoneWindowManager.java @Override public long interceptKeyBeforeDispatching(WindowState win, KeyEvent event, int poli

  • Android 实现不依赖焦点和选中的TextView跑马灯

    前言 之前有写一篇TextView跑马灯的效果,后来实际项目中有发现新的问题,比如还是无法自动跑,文本超过了显示区域就截取的问题,今天换了一种思路来实现,更简单更好用. 正文 代码实现: public class MarqueeTextView extends TextView { /** 是否停止滚动 */ private boolean mStopMarquee; private String mText; private float mCoordinateX; private float

  • Android OnFocuChangeListener焦点事件详解

    本文实例为大家分享了Android OnFocuChangeListener焦点事件的具体代码,供大家参考,具体内容如下 界面 打开"res/layout/activity_main.xml"文件. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layou

  • Android开发之滑动图片轮播标题焦点

    先给大家这是下效果图: 谷歌提供的v4包,ViewPager 在布局文件中,先添加<android.support.v4.view.ViewPager/>控件,这个只是轮播的区域 在布局文件中,布置标题描述部分 线性布局,竖向排列,背景色黑色半透明,这个布局和上面的ViewPager底部对齐layout_alignBottom="@id/xxx" <TextView/>居中显示, 小点部分,先放过空的LinearLayout,id是ll_points在代码中对其

  • Android videoview抢占焦点的处理方法

    问题描述: android 机顶盒应用: 应用程序主界面(MainActivity)只有两个控件,一个videoview和一个button. 视频框设置无焦点,按键有焦点. 首次进入应用时焦点正常,聚焦在button上:但是当点击button跳转到下一个activity并返回时,焦点却聚焦到了videoview上,并且代码里强制设置焦点: Button.requestFocus(); 无效,现象是视频加载时,焦点是在button处,但是当视频加载完成开始播放时,整个activity失去焦点,几秒

  • Android基于TextView不获取焦点实现跑马灯效果

    本文实例讲述了Android基于TextView不获取焦点实现跑马灯效果.分享给大家供大家参考,具体如下: 1. 写一个类继承TextView package com.example.tt; import android.content.Context; import android.graphics.Rect; import android.util.AttributeSet; import android.widget.TextView; public class ScrollingText

  • Android 设置Edittext获取焦点并弹出软键盘

    Android 设置Edittext获取焦点并弹出软键盘 /** * EditText获取焦点并显示软键盘 */ public static void showSoftInputFromWindow(Activity activity, EditText editText) { editText.setFocusable(true); editText.setFocusableInTouchMode(true); editText.requestFocus(); activity.getWind

随机推荐