如何通过代码模拟输入框失焦以触发计算逻辑？

方法1：直接调用计算函数（最可靠） #

既然计算逻辑绑定在输入框的blur事件上，与其模拟失焦，不如直接调用执行计算的核心逻辑。

假设你的原绑定代码是这样的：

$('#test-1').blur(function() {
    // 示例计算逻辑
    const inputVal = $(this).val();
    const result = parseInt(inputVal) * 1.5;
    $('#test-id').text(result);
});

可以把计算逻辑抽成独立函数，在页面加载时直接执行：

function calculateTestResult() {
    const inputVal = $('#test-1').val();
    const result = parseInt(inputVal) * 1.5;
    $('#test-id').text(result);
}

// 绑定失焦事件供用户交互时触发
$('#test-1').blur(calculateTestResult);

// 页面加载完成后自动执行计算
$(document).ready(calculateTestResult);

方法2：确保事件绑定后再触发blur #

如果一定要模拟失焦事件，必须保证事件已绑定完成且DOM元素加载完毕——之前的失败大概率是触发时机不对（比如DOM未加载就调用blur()）。正确写法如下：

$(document).ready(function() {
    // 先绑定失焦事件
    $('#test-1').blur(function() {
        const inputVal = $(this).val();
        $('#test-id').text(parseInt(inputVal) * 1.5);
    });

    // 触发失焦事件
    $('#test-1').blur();
});

注意你之前写的trigger(click)存在语法错误（应为trigger('click')），且点击事件并非绑定计算逻辑的事件，所以即使触发也无效。

方法3：用PHP直接渲染计算结果（无需JS） #

如果计算规则固定，完全可以在PHP渲染页面时直接算出结果，不需要依赖JavaScript：

<input type="number" id="test-1" name="test-1" value="<?php echo $test1; ?>">
<div id="test-id"><?php echo $test1 * 1.5; ?></div>

这种方式更高效，也不会出现JS触发失败的问题，适合计算逻辑简单且固定的场景。

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