如何在.hbs文件中使用script标签实现输入框JS函数绑定？

下面是完整的.hbs文件示例，包含input字段的事件绑定和内嵌的事件处理函数：

<div class="form-group">
  <label for="email-input">邮箱：</label>
  <!-- 绑定实时输入事件到自定义函数 -->
  <input 
    type="email" 
    id="email-input" 
    oninput="validateEmail(this)"
    placeholder="请输入邮箱"
  >
  <p id="email-error" style="color: red; display: none;"></p>

  <!-- 绑定点击事件示例 -->
  <button onclick="submitForm()">提交表单</button>
</div>

<!-- 内嵌脚本编写事件逻辑 -->
<script>
// 实时校验邮箱格式
function validateEmail(input) {
  const emailValue = input.value.trim();
  const errorElement = document.getElementById('email-error');
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!emailRegex.test(emailValue) && emailValue !== '') {
    errorElement.textContent = '请输入有效的邮箱地址';
    errorElement.style.display = 'block';
    input.style.borderColor = 'red';
  } else {
    errorElement.style.display = 'none';
    input.style.borderColor = '#ddd';
  }
}

// 表单提交处理
function submitForm() {
  const emailInput = document.getElementById('email-input');
  const emailValue = emailInput.value.trim();
  
  if (emailValue && document.getElementById('email-error').style.display === 'none') {
    alert(`邮箱 ${emailValue} 验证通过，即将提交`);
    // 这里可以添加实际的表单提交逻辑，比如fetch请求
  } else {
    alert('请先输入有效的邮箱地址');
  }
}
</script>

关键说明： #

1. 事件绑定方式：直接在input标签上使用oninput、onclick等原生事件属性，指定自定义函数名，和普通HTML的写法完全一致。
2. 脚本位置：建议将script标签放在页面内容的末尾，确保DOM元素已经加载完成，避免函数调用时找不到元素的问题。
3. Handlebars变量结合：如果需要使用Handlebars传递的变量，可以直接在脚本中插入表达式，比如：

<script>
// 从Handlebars模板获取默认值
const defaultEmail = "{{user.email}}";
document.getElementById('email-input').value = defaultEmail;
</script>

内容的提问来源于stack exchange，提问作者Diego De Leonardis