如果想让文本输入框根据输入的特定文字改变样式怎么办？

想让文本输入框根据输入的某个特定的问题改变样式怎么办呢？就是比如我有一个文本输入框我想让他在输入红这个字的时候字体颜色也变成红色。要怎么办？引用js绑定某个事件？怎么动态获取input输入的值呢？

输入的时候绑定一个变量，然后用写一个方法判断一下，如果这个变量＝你所说的字符串，给他return   

颜色是红色

就一个回调函数的

<input type="text" name="" id="my-input" />

let colors = {
        '红': 'red',
        '蓝': 'blue',
        '黄': 'yellow',
        '绿': 'green'
    }
    
    let input = document.getElementById("my-input")
    input.addEventListener("input", function(e) {
        let value = e.target.value;
        colorKeys = Object.keys(colors);
        
        for (let i = 0; i < colorKeys.length; i++) {
                let index = value.indexOf(colorKeys[i])
            if(index != -1) {
                let colorKey = value[index]
                let color = colors[colorKey]
                this.style.color = color
            }
        }
        
    })

input change事件获取 input值 。然后 replace 替换一下