javascript - 如何通过其 ID 在表单上修复错误设置键事件？

Question

我想将谷歌地图添加到我的 Laravel 8 / tailwindcss 2 / Alpinejs 2.8 应用程序中，我找到了示例 https://laraveldaily.com/laravel-find-addresses-with-coordinates-via-google-maps-api/

因为我不使用 jquery，但是 alpinejs 我得到了一个错误：

alpine.js:115 Alpine Error: "TypeError: form_ad_location_edit.on is not a function"

当我尝试重新制作代码时：

$('form').on('keyup keypress', function(e) { var keyCode = e.keyCode || e.which; if (keyCode === 13) { e.preventDefault(); return false; } });

进入 ：

<form action="{{ route('admin.ads.ad_locations.'. ( $isInsert ? 'store' : 'update'), [1, ( $adLocation->id ?? '' ), 1 ] ) }}" method="POST" id="form_ad_location_edit" enctype="multipart/form-data">

let form_ad_location_edit = document.querySelector("#form_ad_location_edit")
console.log('form_ad_location_edit::')
console.log(form_ad_location_edit)

form_ad_location_edit.on('keyup keypress', function(e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode === 13) {
        e.preventDefault();
        return false;
    }
});

在控制台中，我看到我得到了有效的表格 elememt ？

哪种方式有效？

谢谢！

Answer 1

我用 addEventListener 方法找到了决定：

let form_ad_location_edit = document.querySelector("#form_ad_location_edit")
adLocationLng= parseFloat(adLocationLng)
adLocationLat= parseFloat(adLocationLat)
form_ad_location_edit.addEventListener("keyup keypress", function(e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode === 13) {
        e.preventDefault();
        return false;
    }
});

这对我行得通。