Asp.Net Core MVC计算器如何实现虚拟数字键盘点击输入功能

实现方案 #

无需修改现有模型和控制器代码，仅调整视图层添加前端逻辑即可完成功能，步骤如下：

第一步：修改视图输入框配置 #

给两个数值输入框添加激活状态标记，结果输入框设置为只读，修改原有表单内的代码如下：

@using (Html.BeginForm("IndexCalculator", "Calc", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.LabelFor(m => m.FirstNumber) 
    @Html.TextBoxFor(x => x.FirstNumber, new { @class = "calc-input", @onclick = "setActiveInput(this)" })<br />
    @Html.LabelFor(m => m.SecondNumber) 
    @Html.TextBoxFor(x => x.SecondNumber, new { @class = "calc-input", @onclick = "setActiveInput(this)" })<br />
    @Html.LabelFor(m => m.Result) 
    @Html.TextBoxFor(x => x.Result, new { @readonly = "readonly" })<br />
    @Html.DropDownListFor(m => m.calculationMethod, (Html.GetEnumSelectList<CalcModel.CalculationMethod>()))
    <input type="submit" />

    <!-- 新增虚拟数字键盘结构 -->
    <div class="virtual-keyboard">
        <button type="button" class="key-btn" data-value="1">1</button>
        <button type="button" class="key-btn" data-value="2">2</button>
        <button type="button" class="key-btn" data-value="3">3</button><br>
        <button type="button" class="key-btn" data-value="4">4</button>
        <button type="button" class="key-btn" data-value="5">5</button>
        <button type="button" class="key-btn" data-value="6">6</button><br>
        <button type="button" class="key-btn" data-value="7">7</button>
        <button type="button" class="key-btn" data-value="8">8</button>
        <button type="button" class="key-btn" data-value="9">9</button><br>
        <button type="button" class="key-btn" data-value=".">.</button>
        <button type="button" class="key-btn" data-value="0">0</button>
        <button type="button" class="key-btn" id="backspace">退格</button>
    </div>
}

第二步：添加前端交互逻辑 #

在视图底部添加JS代码，处理输入框激活和键盘按钮点击逻辑：

<script>
// 存储当前激活的输入框
let activeInput = null;

// 点击输入框时标记为当前激活对象
function setActiveInput(input) {
    activeInput = input;
}

// 数字和小数点按钮点击事件
document.querySelectorAll('.key-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        if (!activeInput) return;
        const value = this.dataset.value;
        // 退格逻辑
        if (this.id === 'backspace') {
            activeInput.value = activeInput.value.slice(0, -1);
            return;
        }
        // 限制只能有一个小数点
        if (value === '.' && activeInput.value.includes('.')) return;
        // 追加输入内容
        activeInput.value += value;
    });
});
</script>

第三步：（可选）添加键盘样式 #

可添加简单CSS调整虚拟键盘的显示效果：

<style>
.virtual-keyboard {
    margin: 15px 0;
    width: 200px;
}
.key-btn {
    width: 60px;
    height: 40px;
    margin: 2px;
    cursor: pointer;
}
</style>

调整完成后，点击FirstNumber或SecondNumber输入框后，点击虚拟键盘按钮即可完成数值输入，原有计算提交逻辑不受影响。

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