Egret eui.TextInput组件输入后未清掉焦点,微信浏览器切换后台再切回,点击会一直唤醒输入法的Bug

如题,碰到的情况呢,是egret发布为HTML5,在点击eui.TextInput组件进行输入时,如果切换到后台,再切回后,除非再点击其他eui.TextInput组件,不然点击屏幕其他地方,都会不停唤醒输入法。

引申还会有一种无奈的情况,就是手机用原生键盘的时候,完成输入如果直接点击屏幕中的按钮,是可以直接触发的。此后切换场景或者做其他操作都可以。但即使将旧的界面remove掉,切换至后台再切回,也会出现一直唤醒软键盘的问题。(有些输入法,第一次点击软键盘外,会先取消软键盘,就不会有上述的全部问题)。

原因,我推测是焦点没有消掉的问题。

我找了一些api,没有发现什么可以参考的办法。做了一些尝试,最后试出了一个旁门左道。但这样做有问题,处理以后,其他的输入组件都无法获取焦点了。

在Main中的createChildren方法里,设置监听“切入切出”的方法,在切入后台(egret.lifecycle.onPause)时进行处理。

egret.lifecycle.onPause = () => {
    //进入后台
    MyLog("进入后台");
    if (true) {
        //这样做是错的。不会再弹出输入框,但之后其他输入组件也无法获取焦点了
        let kong = new eui.TextInput();
        kong.x = 1500;
        this.stage.addChild(kong);
        kong.textDisplay.setFocus();
        this.stage.removeChild(kong);
    }
}

 比较暴力,找不到api直接改的。新加了一个eui.TextInput组件,把焦点移入其中的输入组件(eui.EditableText)中,使用setFocus方法。然后把它删掉。好了,现在开始,焦点丢了,谁都找不到。

还得想其他办法。其实html有直球可以用。找到当前有焦点的组件,清掉就好了嘛。

老地方做处理:


egret.lifecycle.onPause = () => {
    //进入后台
    MyLog("进入后台");
    if (true) {
        var activename = document.activeElement; // 当前获取焦点的对象
        if (activename && activename["blur"]) {
            activename["blur"]();
        }
    }
}

如上,现在看来是好用的。

补充:找到输入组件中的Input组件,是在eui.EditableText组件中,依次找["inputUtils", "stageText", "htmlInput", "_simpleElement"]。就能获取到Input组件,有focus()、blur()可以用。(直接这样消掉组件的焦点,在输入文本所在组件的页面,切出切入是好用的。但是将前一个页remove掉,换到其他页,再切换,又会出现键盘。切换其他页前我也手动清了一下焦点,组件当前本身是无焦点的。不知为何,还未深究)

 

~~~~~~~~~~~~~~~

记录几样其他做过但没有用的尝试:

旁边添加了按钮,输入后直接点击按钮,remove掉当前界面。切后台回来会一直有bug,触发的还是原来那个输入框的效果。手动隐藏键盘,再点击还是会唤醒。

尝试调用组件的dispatchEventWith方法派发egret.FocusEvent.FOCUS_OUT事件,添加监听方法,派发事件是成功的,监听事件会被调用,但是,焦点不变。不大明白dispatchEventWith这个方法是什么情况,先不理会了。

尝试隐藏,更新布局,再显示,没有变化。

禁用组件我也尝试了下,貌似不成。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

h5 canvas在微信浏览器写字触发下拉是因为微信浏览器在手机端上具有一种称为"全面屏优化"的特性。当在微信浏览器中使用h5 canvas进行绘图,特别是在绘制过程中使用到了触摸事件时,用户手指在画布上滑动,微信浏览器误将该操作视为页面下拉的手势操作。 这种误触下拉的原因在于微信浏览器为了适应手机全面屏的特性,引入了一种滑动操作的检测机制。当用户手指在页面上进行垂直滑动时,微信浏览器判断该滑动操作是否可以触发页面下拉的动作,以提升用户体验。 然而,在h5 canvas上绘制时,绘图操作往往涉及到用户手指在画布上的触摸事件,用户手指的滑动被误判为页面下拉的手势操作,导致页面被下拉,从而中断了绘图的过程。 为了解决这个问题,可以尝试以下方法: 1. 在canvas元素上添加touchstart、touchmove、touchend等触摸事件监听器,并阻止事件冒泡或默认行为,以防止微信浏览器误判操作。 2. 可以使用第三方库或框架,如createjs、egret等,来实现画布绘制,这些库或框架通常对各种浏览器的兼容性问题进行处理,包括微信浏览器下的问题。 如果以上方法无法解决问题,那可能是由于微信浏览器的特性限制造成的,可以考虑使用其他浏览器或开发移动端应用程序来实现画布绘制,以避免微信浏览器中的下拉误触问题。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值