实现回车键替代提交按钮触发calvol()函数的技术需求

需求：在输入框中输入数值后，按下回车键即可替代点击Submit按钮，触发calvol()函数执行并返回计算结果。

完整实现代码 #

HTML 代码

<body>
    <div class="container-fluid">
    <div class="row inpdip">
      <div class="col diptext">
        <label for="dip">Dip</label>
      </div>
      <div class="col">
        <input type="number" class="inpbox" id="dip">
      </div>
    </div>
    <div class="row">
        <div class="col">   
        </div>
        <div class="col">
            <button class="btn btn-dark" id="myBtn" type="submit" onclick="calvol()">Submit</button>
        </div>
    </div>
    <div class="row outputvol">
      <div class="col diptext ">
        Volume :
      </div>
      <div class="col">
        <span class="" id="result"></span>
      </div>
    </div>
</body>

JavaScript 代码

function calvol() {
    var R = 10.5;
    var L = 62.5;
    var inputh = document.getElementById('dip').value;

    if (inputh > 210) {
        document.getElementById('result').innerHTML = "Dip is over the tank limit.";
    } else if (inputh <= 0) {
        document.getElementById('result').innerHTML = "Enter a higher number";
    } else {
        var h = inputh / 10;
        let TankVolume = L * (R * R * Math.acos((R - h)/ R) - (R - h) * Math.sqrt(2 * R * h - h * h));
        let volume = Math.round(TankVolume);
        console.log(volume);
        document.getElementById('result').innerHTML = volume + "  Liter";
    }
}

// 绑定回车键触发事件
var input = document.getElementById("dip");
input.onkeyup = function(e){
    // 监听回车键（推荐用e.key === 'Enter'替代keyCode，兼容性更优）
    if(e.keyCode === 13 || e.key === 'Enter'){
        calvol();
    }
}

关键说明 #

• 给输入框绑定keyup事件，监听用户按键操作
• 检测到回车键时直接调用calvol()函数，和点击Submit按钮实现完全相同的计算逻辑
• 保留原按钮点击触发逻辑，两种操作方式互不冲突

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