那种输入指定字符就改变颜色的界面是怎么弄的

比如输入private就被自动变成紫色，但在“”里输入就还是黑色，这种界面怎么搞

使用switch语句，将输入的值转化为对应的颜色值，然后
document.getElementById("showText").style.background = 你转化后的颜色值就可以了
比如 输入 ’红色‘
在代码里转红色等于 red
document.getElementById("showText").style.background = red
即可

backGround(val) {
                let styleBgColor = ''
                switch (val) {
                case '红色':
                    styleBgColor = 'red'
                    break
                case '黑色':
                    styleBgColor = '#000'
                    break
                case '白色':
                    styleBgColor = '#ffff'
                    break
                default:
                    styleBgColor = '#fff'
                }
                return styleBgColor
            },


document.getElementById("showText").style.background = this.backGround(even.value)


<body id="showText">
    <input type="text" oninput="getValue(this)"/>
    <script>
      function getValue(event){
        console.log(event.value)
        document.getElementById("showText").style.background = event.value;
      }
    </script>
  </body>

img