更改textarea中特定单词的颜色 [英] Change color of specific words in textarea
问题描述
我正在构建一个Sql查询构建器，并希望在用户输入像SELECT，FROM，WHERE这样的文本时更改textarea中某个单词的文本颜色。
我搜索了一下，超出了这个范围（
我尝试了Keyup与Contains在jQuery中的结合，但这并没有太大的结果。
键入： https://api.jquery.com/keyup /
包含： https ：//api.jquery.com/contains-selector/
我希望有人可以通过一个或多个网站帮助我找到更多信息。
问候，Jens
在textarea中，但您可以使用 contenteditable 属性来更改元素的内容文本（如div，p，span）。要做这个工作，你可以使用JavaScript插件，但是如果你想创建它，你可以使用这个代码。为此，您需要获取文本中的任何单词。然后检查目标单词是否在SQL语句中高亮显示。
#editor {width：400px; height：100px;填充：10px;背景颜色：＃444;白颜色; font-size：14px; font-family：monospace;} .statement {color：orange;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =editor contenteditable =true>< / div>
I'm building a Sql query builder and would like to change the text color of a word in a textarea when the user types in words like SELECT, FROM, WHERE.
I've searched around a bit and beyond this (https://jsfiddle.net/qcykvr8j/2/) I unfortunately do not come any further.
Example code
HTML:
<textarea name="query_field_one" id="query_field_one" onkeyup="checkName(this)"></textarea>
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/
But this example deletes the color when I type further.
What I want is this:
I've tried something with Keyup in combination with Contains in jQuery but that did not result in much.
Keyup: https://api.jquery.com/keyup/
Contains: https://api.jquery.com/contains-selector/
I hope someone can help me with an example or sites where I can find more information .
Regards, Jens
You can't change color words in textarea, but you can use contenteditable attribute to change content text of element (like div, p, span). To do this work you can use javascript plugin, but if you want to create it, you can use this code. For this purpose, you need to get any word in text.Then check that if target word is in SQL statement highlight it.
$("#editor").on("keydown keyup", function(e){
if (e.keyCode == 32){
var text = $(this).text().replace(/[\s]+/g, " ").trim();
var word = text.split(" ");
var newHTML = "";
$.each(word, function(index, value){
switch(value.toUpperCase()){
case "SELECT":
case "FROM":
case "WHERE":
case "LIKE":
case "BETWEEN":
case "NOT LIKE":
case "FALSE":
case "NULL":
case "FROM":
case "TRUE":
case "NOT IN":
newHTML += "<span class='statement'>" + value + " </span>";
break;
default:
newHTML += "<span class='other'>" + value + " </span>";
}
});
$(this).html(newHTML);
//// Set cursor postion to end of text
var child = $(this).children();
var range = document.createRange();
var sel = window.getSelection();
range.setStart(child[child.length - 1], 1);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
$(this)[0].focus();
}
});
#editor {
width: 400px;
height: 100px;
padding: 10px;
background-color: #444;
color: white;
font-size: 14px;
font-family: monospace;
}
.statement {
color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editor" contenteditable="true"></div>
这篇关于更改textarea中特定单词的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
