dom-events 相关问题

我在 Svelte 应用程序中有一个表单，如下所示：我在 Svelte 应用程序中有一个这样的表单：  <form on:submit|preventDefault={onSave} class="stack-small" on:keydown={e => e.key === 'Escape' && onCancel()}> <div class="form-group"> <label for="todo-{todo.id}" class="todo-label">New name for '{todo.name}'</label> <input bind:value={name} type="text" id="todo-{todo.id}" autoComplete="off" class="todo-text" /> </div> <div class="btn-group"> <button class="btn todo-cancel" on:click={onCancel} type="button"> Cancel<span class="visually-hidden">renaming {todo.name}</span> </button> <button class="btn btn__primary todo-edit" type="submit" disabled={!name}> Save<span class="visually-hidden">new name for {todo.name}</span> </button> </div> </form> 我想在用户按下输入或任何按钮上的 esc 键时执行 onCancel()，但我收到以下警告： A11y：非交互式元素 <form> 不应分配鼠标或键盘事件侦听器。正确的处理方法是什么？这总是取决于具体情况。重要的是，所有操作都可以通过键盘和鼠标进行，并且使用屏幕阅读器的用户可以获得所有必要的信息。因为在这里取消也可以通过常规按钮调用（并且处理程序不关心处理直接分派到元素的事件，这需要元素可聚焦和聚焦），我想说这很好。唯一可能出现问题的是有关执行取消的反馈。如果此表单是对话框的一部分并且这只是关闭对话框，那么这将是 ESC 上的预期操作。通常，焦点应该切换回打开对话框的任何内容，这应该提供足够的上下文。特别是在处理冒泡事件时，您可能会收到一些误报警告。如果警告被确定为误报，您可以通过上面的  评论忽略它。

forms dom-events accessibility svelte svelte-component

回答 1 投票 0

如何为此底座上的 mouseConstraint 创建 HTML 消息？

这就是我现在正在尝试从 Matter.js 库中进行的工作。我想使用两个事件来触发两条 HTML 消息，方法是抓住摇篮左侧的球，该球会显示“He...

javascript events dom-events mouseevent matter.js

回答 1 投票 0

以A11y友好的方式处理forma上的Esc键

我在 Svelte 应用程序中有一个表单，如下所示：我在 Svelte 应用程序中有一个这样的表单：  <form on:submit|preventDefault={onSave} class="stack-small" on:keydown={e => e.key === 'Escape' && onCancel()}> <div class="form-group"> <label for="todo-{todo.id}" class="todo-label">New name for '{todo.name}'</label> <input bind:value={name} type="text" id="todo-{todo.id}" autoComplete="off" class="todo-text" /> </div> <div class="btn-group"> <button class="btn todo-cancel" on:click={onCancel} type="button"> Cancel<span class="visually-hidden">renaming {todo.name}</span> </button> <button class="btn btn__primary todo-edit" type="submit" disabled={!name}> Save<span class="visually-hidden">new name for {todo.name}</span> </button> </div> </form> 当用户按下输入或任何按钮上的 esc 键时，我想执行 onCancel()，但我收到以下警告： A11y：非交互式元素 <form> 不应分配鼠标或键盘事件侦听器。正确的处理方法是什么？这总是取决于具体情况。重要的是，所有操作都可以通过键盘和鼠标进行，并且使用屏幕阅读器的用户可以获得所有必要的信息。因为在这里取消也可以通过常规按钮调用（并且处理程序不关心处理直接分派到元素的事件，这需要元素可聚焦和聚焦），我想说这很好。唯一可能出现问题的是有关执行取消的反馈。如果此表单是对话框的一部分并且这只是关闭对话框，那么这将是 ESC 上的预期操作。通常，焦点应该切换回打开对话框的任何内容，这应该提供足够的上下文。特别是在处理冒泡事件时，您可能会收到一些误报警告。如果警告被确定为误报，您可以通过上面的  评论忽略它。

forms dom-events accessibility svelte svelte-component

回答 1 投票 0

document.activeElement 不显示阴影根中的焦点元素

document.activeElement 很简洁，但是当在使用影子根的网站上使用它时 - 我得到了外部容器。如何获取嵌套阴影根中的活动元素？我需要爬过去吗

javascript html dom dom-events

回答 1 投票 0

如何处理 switch case 内的 Shift + Tab？

所以我一直在使用嵌套的 if-else 和 event.which 来处理所有键盘导航，但我想更改为 switch-case 和 event.key。我在处理 Shift+Tab 时遇到了麻烦，甚至......

javascript jquery dom-events keyboard-events

回答 2 投票 0

Javascript：如何处理 switch case 内的 Shift + Tab？

所以我一直在使用嵌套的 if-else 和 event.which 来处理所有键盘导航，但我想更改为 switch-case 和 event.key。我在处理 Shift+Tab 时遇到了麻烦，甚至......

javascript jquery dom-events keyboard-events web-frontend

回答 2 投票 0

如何检查表单字段上按下的按键是否为数字（0 - 9）？

我在 JavaScript 的表单字段上使用 onkeyup 事件，我想检查按下的键是否是数字 - 即 0 - 9，这样我就可以对输入执行某些操作。我在 JavaScript 的表单字段上使用 onkeyup 事件，我想检查按下的键是否是数字 - 即 0 - 9，这样我就可以对输入执行某些操作。 <input type="text" onkeyup="" /> 我需要使用正则表达式吗？使用 event.key 获取实际值。要检查是否为整数，只需使用 isFinite input.addEventListener("keydown", function(event) { const isNumber = isFinite(event.key); }); 其他选项： const isNumber = /^[0-9]$/i.test(event.key) 更简单的 HTML 解决方案是使用 number 类型输入。它仅限于数字（某种程度）。 <input type="number"> 无论哪种方式，您都应该使用以下方法清除所有用户输入： string.replace(/[^0-9]/g,''); 请参阅这些： HTML 文本输入仅允许数字输入仅允许输入数字我使用以下函数来检查给定字符串是否为数字 // Validate Numeric inputs function isNumber(o) { return o == '' || !isNaN(o - 0); } 假设您的 keyup 或 keydown 事件的按键代码位于 keyCode 变量中： var keyCode = e.keyCode || e.which; if (keyCode >= 96 && keyCode <= 105) { // Numpad keys keyCode -= 48; } console.log(isNumber(String.fromCharCode(keyCode))); 只允许0-9，其他字母将被吞掉。 $('#id').keypress(function (e) { var validkeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']; if (validkeys.indexOf(e.key) < 0) return false; }); 您可以订阅“InputEvent”，然后获取“data”属性。例如 input.addEventListener('beforeinput', (event) => { const data = event.data; // if "data" is present - user enter some character // if "data" is NOT present - user tap non character key (e.g. delete, shift and other) if(data) { const isAllow = /\d/.test(data); if(!isAllow) { e.preventDefault(); } } }) 更多信息 event.data - https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/data beforeinput 事件 - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event input.addEventListener("keydown", function(event) { if (isNaN(event.key)) { event.preventDefault(); }); // Angular 17 // <input type="text" (keydown) = "numberOnly($event)" /> numberOnly(event: KeyboardEvent) { const val = event.which; if (val >= 48 && val <=57) { // 0 - 9 return true; } else if (val >= 96 && val <= 105) { // 0 - 9 return true; } else if (val == 8 || val == 9 || val == 37 || val == 39 || val == 46){ // backspace, tab, left arrow, right arrow, delete return true; } else { return false; } } 看这个： http://www.javascriptkit.com/javatutors/javascriptkey2.shtml <script type="text/javascript"> function displayunicode(e){ var unicode=e.keyCode? e.keyCode : e.charCode if unicode >= 48 && unicode <= 57 { alert('number') } else{ } alert('nonnumber') } </script> <form> <input type="text" size="2" maxlength="1" onkeyup="displayunicode(event); this.select()" /> </form>

javascript dom-events

回答 8 投票 0

如何在 nuxt 布局中监听页面 $emit？

Nuxt 2.15.6；我想通过动态切换根布局中的菜单组件来切换菜单组件的布局。默认.vue &... Nuxt 2.15.6; 我想通过动态切换根布局中的菜单组件来切换菜单组件的布局。 default.vue <template> <component :is="navLayout"></component> <Nuxt :navLayout="navLayout = $event" /> </template> data() { return { navLayout: "default" }; }, 在我的页面的“子”组件中，例如。 login.vue (/login) 我 $emit 一个事件； ... import nav2 from "@/layouts/nav2"; ... created() { this.$emit("navLayout", nav2); }, 现在似乎是 <Nuxt> 组件无法捕获该事件。我还尝试调用 <Nuxt @navLayout="test()" /> 方法。如何在我的 this.$root.$emit(...); 和中避免 login.vue this.$root.$on("navLayout", navLayout => { this.navLayout = navLayout; }); 在default.vue？编辑：这个答案工作正常，因为看起来你现在无法做到这一点：https://github.com/nuxt/nuxt.js/issues/8122#issuecomment-709443008 在子组件中 <button @click="$nuxt.$emit('eventName', 'nice payload')">nice</button> 在默认布局上 <script> export default { created() { this.$nuxt.$on('eventName', ($event) => this.test($event)) }, methods: { test(e) { console.log('test ok >>', e) }, }, } </script> 在 Nuxt 本身上放置一个侦听器不起作用。 <Nuxt @navLayout="navLayout = $event" :navLayout="navLayout" /> 我可以看到事件发生并且侦听器插入到<nuxt></nuxt>，但它不会触发侦听器的任何方法... PS：至少适用于<nuxt-child></nuxt-child>。也许我没有正确理解你的问题，但在我看来，你正在尝试自己做布局的目的。这意味着您将使用用于登录的菜单组件、默认布局等创建一个布局，如下所示：登录.vue <template> <LoginMenu> <Nuxt/> </template> 默认.vue <template> <DefaultMenu> <Nuxt/> </template> 在您的页面上您会执行以下操作： export default { layout: login } 然后将使用登录菜单组件加载布局。在所有其他页面上，它将加载默认菜单。更多信息在这里：https://nuxtjs.org/examples/layouts/

javascript vue.js nuxt.js dom-events

回答 2 投票 0

Angular：如何以编程方式触发 DOM 事件，例如鼠标单击？

我想以编程方式引发单击 MouseEvent，例如，从 Angular 组件来模拟鼠标单击。这可能吗？如何实现？我在这里没有找到任何关于此的现有问题。 T...

angular dom-events

回答 2 投票 0

如何定位数组的特定元素？

我目前正在处理 odin 项目的待办事项列表。根据说明，我的待办事项列表可以创建一个新项目，然后我们可以将任务添加到该项目中。我现在有一个侧边栏列表...

javascript dom dom-events

回答 1 投票 0

在单击处理程序运行之前，focusIn 处理程序中的 setTimeout 如何解析？

我希望 DOM 事件处理是同步的，无论浏览器中事件的内部顺序如何。由于我不明白的原因，点击处理程序被严重延迟（在 30-...