稚嫩的我终于发现了玄机,相对于浏览器运行无问题的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);
});
});
});
2 个回复
a567f6396d9db5 (作者)
自己回答一下
问题的原因是我的这个页面是通过openWindow打开的页面,这样一来(function () {}))就不会被触发了。
所以参考了自定义事件这篇文档里,在打开的窗口里触发自定义事件的方式重新设置监听。
有个考虑就是这个方法会不会重复对同一个元素不断重复添加监听器,还要做更多的考虑。
a567f6396d9db5 (作者)
补充一下