基于左右键点击事件修改输入框值的需求变更

看起来你已经有了基础的鼠标点击事件绑定逻辑，只是需要把弹窗行为改成直接修改对应输入框的值对吧？咱们直接调整事件处理的核心代码就行，我给你写个完整的可运行示例：

HTML 结构 #

先给需要处理的输入框加上统一的类名，方便批量绑定事件：

<input type="text" class="clickable-input" placeholder="左键点我设为0，右键点我设为1">
<input type="text" class="clickable-input" placeholder="试试这个输入框">

JavaScript 逻辑 #

替换原来的弹窗代码，改为直接修改输入框的value属性：

// 获取所有需要处理的输入框
const targetInputs = document.querySelectorAll('.clickable-input');

targetInputs.forEach(input => {
    // 左键点击：设置值为0
    input.addEventListener('click', function() {
        this.value = '0';
    });

    // 右键点击：设置值为1，同时阻止默认右键菜单弹出
    input.addEventListener('contextmenu', function(e) {
        e.preventDefault(); // 避免弹出浏览器默认右键菜单
        this.value = '1';
    });
});

关键说明 #

• 核心改动就是把原来的alert(0)/alert(2)替换成了this.value = '0'/this.value = '1'，直接操作输入框的内容
• 右键事件需要调用e.preventDefault()，不然浏览器会弹出默认的右键菜单，影响交互体验
• 如果你的输入框已经有其他的选择方式（比如ID），只需要把querySelectorAll的选择器改成你需要的，然后保留事件处理的核心逻辑就可以

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