更改textarea中特定单词的颜色

9 浏览
0 Comments

更改textarea中特定单词的颜色

我正在构建一个SQL查询构建器，并希望在用户输入类似SELECT、FROM、WHERE等关键词时改变文本区域中单词的颜色。

我已经搜索了一些内容，除了这个（https://jsfiddle.net/qcykvr8j/2/），我没有找到更多有用的信息。

示例代码：

HTML：

JS：

function checkName(el) {
    if (el.value == "SELECT" || 
    el.value == "FROM" || 
    el.value == "WHERE" || 
    el.value == "LIKE" || 
    el.value == "BETWEEN" || 
    el.value == "NOT LIKE" || 
    el.value == "FALSE" || 
    el.value == "NULL" || 
    el.value == "TRUE" || 
    el.value == "NOT IN") {
        el.style.color='orange'
    } else {
        el.style.color='#FFF'
    }
}

JSFiddle：

https://jsfiddle.net/qcykvr8j/2/

但是这个示例在我继续输入时会删除颜色。

我想要的是这样的效果：

Right way

我尝试了一些使用jQuery中的Keyup和Contains组合的方法，但没有取得很多进展。

Keyup: https://api.jquery.com/keyup/

Contains: https://api.jquery.com/contains-selector/

我希望有人能给我提供一个示例或者一些可以找到更多信息的网站。

谢谢，Jens

0