能否在Alpine.js中为每个<template>元素绑定keydown事件？

<template>本身是DOM模板容器，不会被直接渲染，所以需要把事件绑定到它生成的实际元素（也就是你的<span>）上。要实现仅允许数字输入的效果，可按以下方式处理：

实现方案 #

让生成的<span>可编辑，通过@keydown事件过滤非数字按键，同时控制输入内容：

<div x-data="{ inputs: Array(3).fill('') }">
  <template x-for="(val, idx) in inputs" :key="idx">
    <span
      contenteditable="true"
      x-text="val"
      @keydown="
        // 允许数字、退格、删除、方向键等必要操作
        const allowed = ['0','1','2','3','4','5','6','7','8','9','Backspace','Delete','ArrowLeft','ArrowRight'];
        if (!allowed.includes($event.key)) $event.preventDefault();
        
        // 同步输入到响应式数据（可选，按需使用）
        if (allowed.includes($event.key) && !['Backspace','Delete'].includes($event.key)) {
          inputs[idx] += $event.key;
        } else if ($event.key === 'Backspace') {
          inputs[idx] = inputs[idx].slice(0, -1);
        }
      "
      class="border px-2 py-1 mr-2"
    ></span>
  </template>
</div>

核心说明 #

• 事件绑定位置：直接在<template>内部的<span>上绑定@keydown，每个生成的<span>都会独立触发事件。
• 按键过滤：通过判断按键是否在允许列表内，阻止非数字输入的默认行为，避免无效字符输入。
• 数据同步：如果需要将输入内容同步到Alpine的响应式数据中，可在事件回调里直接修改对应索引的数组值，实现视图与数据的双向同步。

内容的提问来源于stack exchange，提问作者rayncorg