请问大佬怎么给INPUT元素添加监听事件

琦玉

elmGetter.each('#sales-form-swapOrderDetailAddPage', document, swap => { if (swap) { swap.parentElement.insertBefore(triple, swap); swap.addEventListener('keydown', checkPhoneKey); } });

function checkPhoneKey(key) { return (key >= '0' && key <= '9') || ['+','(',')','-','ArrowLeft','ArrowRight','Delete','Backspace'].includes(key); }

就是一个input只能输入数字的功能，查看事件侦听器也可以看，但是就是没效果，checkPhoneKey这个函数是复制MDN的，应该没什么问题。

王一之

提问建议发布悬赏贴：https://bbs.tampermonkey.net.cn/forum-77-1.html

李恒道

checkPhoneKey只是检测
没做赋值呀

琦玉

王一之 发表于 2023-4-7 16:07
提问建议发布悬赏贴：https://bbs.tampermonkey.net.cn/forum-77-1.html

好的，大佬

cxxjackie

首先参数不对，监听函数的参数是事件，key是他的一个属性：

1. function checkPhoneKey(e) {
   
2.     console.log(e.key);
   
3. }

复制代码

其次通过return false阻止默认行为仅对on类型事件有效，对于addEventListener绑定的事件，返回值是没有意义的，应该使用preventDefault：

1. function checkPhoneKey(e) {
   
2.     if (e.key == '0') {
   
3.         e.preventDefault();
   
4.     }
   
5. }

复制代码

最后对于input元素，指定type类型是更简单的做法，无需绑定事件：

1. swap.type = 'number';

复制代码

琦玉

李恒道 发表于 2023-4-7 19:44
checkPhoneKey只是检测
没做赋值呀

这个函数返回 false 会阻止事件的默认行为，网站是这样介绍的

琦玉

cxxjackie 发表于 2023-4-7 20:40
首先参数不对，监听函数的参数是事件，key是他的一个属性：

其次通过return false阻止默认行为仅对on类型 ...

感谢大佬解惑，感谢感谢