简体   繁体   中英

How can i change `keyword` color on runtime in `textarea` or `textbox`? Javascript

I have a textarea i want that when i type keyword like var and press SPACE button then it's color will be blue on runtime.I defind many keyword my self.Not on button click its will be on runtime.How can i do this?Thanks.And i also want this textarea text in codebehind .I'm working in ASP.NET C# environment.Same like SQL-QUERY-EDITOR . Here is my code :

<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>

in 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> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM