如何在更改/键入/输入到 Javascript 函数时使用替换 jQuery 函数

Question

我正在使用 jQuery，当数值输入到输入框中时，例如1234 它将它们分别转换为 ABCD。但我想将此 jQuery 函数转换为纯 Javascript。请看一下我的 jQuery 代码，它工作得非常好，并建议我如何将它转换成 Javascript（我也很困惑，为什么它总是让我在最后输入的字母，如果我在中间输入？）。

$(document).ready(function(){
  $('input[name="xrd-reference"]').bind("change keyup input",function() {
    $('input[name="xrd-reference"]').val($('input[name="xrd-reference"]').val().replace(/1/g, 'A').replace(/2/g, 'B').replace(/3/g, 'C').replace(/4/g, 'D').replace(/5/g, 'E').replace(/6/g, 'F').replace(/7/g, 'G').replace(/8/g, 'H').replace(/9/g, 'I').replace(/0/g, 'O')); 
  });
});

<input name='xrd-reference'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 1

会是这样的

<input name="xrd-reference">

<script>
    const substitutions = {
        1: 'A',
        2: 'B',
        3: 'C',
        4: 'D',
        5: 'E',
        6: 'F',
        7: 'G',
        8: 'H',
        9: 'I',
        0: 'O'
    };
    window.onload = () => {
        const input = document.querySelector('[name=xrd-reference]');
        input && input.addEventListener('input', e => {
        input.value = input.value.replace(/[0-9]/g, (char) => substitutions[char] || char);
        });
    }

    
</script>