时间:2021-05-21
场景是这样的,站点上筛选按钮点击后弹出层(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.处理事件
好了,问题解决了
但是会又问题,就是主动点击键盘收起按钮时没办法获取任何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>声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一、使用软键盘的Done键隐藏键盘出发软键盘隐藏最常用的事件是文本框的DidEndonExit,它在用户按软键盘中的Done键时发生。选中一个UITextFie
Android设置Edittext获取焦点并弹出软键盘/***EditText获取焦点并显示软键盘*/publicstaticvoidshowSoftInput
Android软键盘状态并隐藏输入法的实例1软键盘状态的切换2强制隐藏输入法键盘MainActivity如下:packagecc.c;importandroid
本文实例讲述了Android软键盘弹出时的界面控制方法。分享给大家供大家参考,具体如下:有时候androidactivity弹出软键盘后布局改变下面有三种模式可
在火狐浏览器中直接使用this.focus();即可实现。在IE中,在this.focus();之后再把文本框的值赋给文本框,焦点即在最后了。很简单哟!!如:复