为何输入波斯语字符时JavaScript的onchange事件不触发？

问题分析 #

onchange事件触发的前提是输入框失去焦点且内容确实发生改变。但输入波斯语这类非拉丁语系字符时，多数输入法会进入「组合输入模式」——输入过程中字符处于临时组合状态，输入框的value并未真正完成更新，直到用户确认输入（比如按空格、切换输入法或点击其他区域）。部分浏览器对这种场景下的onchange事件触发逻辑存在差异，导致事件无法正常响应。

解决方案 #

方案1：改用input事件替代onchange #

input事件会在输入框内容实时变化时触发，无论输入的是拉丁语系还是非拉丁语系字符，都能稳定响应：

<input type="text" oninput="field_changed(this, <?php echo $row['id']; ?>);">
<script>
function field_changed(nvalue,fid){
    alert("hello");
}
</script>

方案2：结合compositionend和blur事件 #

如果需要保留「失去焦点才触发」的逻辑，可以监听compositionend（输入法组合输入结束时触发）和blur事件，确保波斯语输入完成后能触发回调：

<input type="text" id="persianInput" data-id="<?php echo $row['id']; ?>">
<script>
const input = document.getElementById('persianInput');
let isComposing = false;

input.addEventListener('compositionstart', () => {
    isComposing = true;
});

input.addEventListener('compositionend', () => {
    isComposing = false;
    field_changed(input, input.dataset.id);
});

input.addEventListener('blur', () => {
    if (!isComposing) {
        field_changed(input, input.dataset.id);
    }
});

function field_changed(nvalue,fid){
    alert("hello");
}
</script>

方案3：手动对比值变化触发回调 #

针对部分旧浏览器的兼容性问题，可以在blur事件中手动对比输入前后的内容，确认变化后触发目标函数：

<input type="text" onblur="checkChange(this, <?php echo $row['id']; ?>)" value="">
<script>
let prevValue = "";

function checkChange(nvalue,fid){
    if (nvalue.value !== prevValue) {
        prevValue = nvalue.value;
        field_changed(nvalue,fid);
    }
}

function field_changed(nvalue,fid){
    alert("hello");
}
</script>

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