a567f6396d9db5
a567f6396d9db5
  • 发布:2019-03-14 09:00
  • 更新:2019-03-14 11:58
  • 阅读:2851

「已解决」打开新窗口后,input元素上的focus和blur事件都不触发

分类:MUI

稚嫩的我终于发现了玄机,相对于浏览器运行无问题的focus用focusin,blur则用focusout取代就OK了,感谢大家对我的帮助。

以下是原问题
在浏览器中测试顺利但是在模拟器和真机测试中,点击了input后软键盘自动弹出,但是完全不触发focus事件,请问是不是我哪里写的有问题。

        <div id="add-form">  
            <div class="rows">  
                <div class="row">  
                    <label for="reminder-name">Reminder Title</label>  
                    <input type="text" name="reminder-name" id="reminder-name" value=""/>  
                </div>  
                <div class="row">  
                    <label for="reminder-name">Address</label>  
                    <input type="text" name="reminder-name" id="reminder-name" value=""/>  
                </div>  
            </div>  
        </div>
    (function($, doc) {  
        $.plusReady(function() {  
            document.querySelectorAll('#add-form .row input').forEach(function (el) {  
                el.addEventListener('focus', function(evt) {  
                    console.log('focused');  
                    el.parentElement.classList.add('focused');  
                }, false);  

                el.addEventListener('blur', function(evt) {  
                    console.log('blurred');  
                    if (evt.target.value.trim() === '') {  
                        el.parentElement.classList.remove('focused');  
                    }  
                }, false);  
            });  
        });  
    });
2019-03-14 09:00 负责人:无 分享
已邀请:
a567f6396d9db5

a567f6396d9db5 (作者)

自己回答一下

问题的原因是我的这个页面是通过openWindow打开的页面,这样一来(function () {}))就不会被触发了。
所以参考了自定义事件这篇文档里,在打开的窗口里触发自定义事件的方式重新设置监听。

有个考虑就是这个方法会不会重复对同一个元素不断重复添加监听器,还要做更多的考虑。

a567f6396d9db5

a567f6396d9db5 (作者)

补充一下

  1. 我在index.html里添加了openCount = 0这个变量,每次打开窗口的时候,只有当openCount为0才触发自定义事件,算是解决了重复添加监听器这个问题。
  2. 经过测试,focus和blur这两个事件,缺失是不支持的,还要继续想办法。

该问题目前已经被锁定, 无法添加新回复