如何为输入框绑定submit事件？小费计算器取值失败求助

核心问题是：<input>元素没有submit事件，这个事件仅属于<form>标签，所以你给输入框绑定submit事件根本不会触发。

方案1：使用form标签包裹输入框（推荐，符合表单语义） #

把输入框放在<form>标签内，监听form的submit事件，用户在输入框按回车时就会触发这个事件：

修改后的HTML： #

<form class="form_bill">
    <h2>Bill</h2>
    <div class="input_icons">
      <i class="fa fa-usd icon"></i>
      <input type="number" class="form_input bill_input" placeholder="0"/>
    </div>
</form>

修改后的JS： #

const billForm = document.querySelector('.form_bill');
const billInput = document.querySelector('.bill_input');

billForm.addEventListener('submit', function (e) {
    e.preventDefault(); // 阻止表单默认提交行为
    const billAmount = billInput.value;
    console.log(billAmount);
    // 后续处理逻辑写在这里
});

方案2：监听输入框的回车事件或实时输入事件 #

如果不想用form标签，可以监听输入框的keydown事件（判断是否按下回车），或者input事件实时获取输入值：

监听回车事件的JS： #

const billInput = document.querySelector('.bill_input');

billInput.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') {
        const billAmount = this.value;
        console.log(billAmount);
        // 后续处理逻辑
    }
});

实时获取输入值的JS（输入时立刻触发）： #

const billInput = document.querySelector('.bill_input');

billInput.addEventListener('input', function () {
    const billAmount = this.value;
    console.log(billAmount);
    // 后续实时处理逻辑
});

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