如何在`textarea`或`textbox`中更改运行时的`keyword`颜色?使用Javascript

时间:2016-06-22 12:10:06

标签: javascript c# jquery html asp.net

我有textarea我希望当我输入var这样的关键字并按SPACE按钮时,它的颜色在运行时将为blue。定义许多关键词我的自我。不点击按钮点击它将在运行时。我怎么能这样做?谢谢。我也想在textarea中使用这个codebehind文本。我在ASP工作.NET C#environment.Same与SQL-QUERY-EDITOR类似。 这是我的代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" runat="server">
var codeInput = document.getElementsByTagName("textarea");
var keywords = new Array("var", "if");
function checkHighlight(){
var codeInput1 = codeInput[0].value;
if(codeInput1 === keywords[0]){
 keywords[0].indexOf(codeInput1).className = "JSfunctions";
}
}
</script>
<style type="text/css" runat="server">
    #JScodeinputbox{font-family:Arial;}
  #JScodeoutputbox{}
    .JSfunctions{color:blue;}
</style>
 </head>
 <body>
 <form id="form1" runat="server">
 <div>
 <textarea id="JScodeinputbox" wrap="logical" rows="30" cols="70" onkeyup="checkHighlight();"></textarea>
</div>
</form>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

在jQuery中:

$("html").append("  <textarea id='text' type='text'> </textarea> "); //create an input box
$("html").append("  <input id='submit' type='submit'>  "); //create a submit button

$("input").css("border", "1px solid black");

$("#submit").click(function() {
  var unit = $("#text").val();
  if (unit == "var") {
    $("#text").css("border", "2px solid blue");
    $("#text").css("background", "blue");
  } else {
    $("#text").css("border", "1px solid black");
    $("#text").css("background", "white");
  }
});

$(document).keydown(function(e) {
  if (e.keyCode == 13 || e.keyCode == 32) {

    var unit = $("#text").val();
    if (unit == "var") {
      $("#text").css("border", "2px solid blue");
      $("#text").css("background", "blue");
    } else {
      $("#text").css("border", "1px solid black");
      $("#text").css("background", "white");
    }

  }
});

$("html").append("(You can also press enter or space)");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>