javascript - How to color specific character(s) in textarea -
i making program search characters in desired <textarea>
. need color specific character found in text area. how can color character(s) in <textarea>
? example, if enter 'a' in input field 'a's in <textarea>
should colored red.....
html
<form method="post" name="searching" onsubmit="return check(this)"> <table border="0" cellpadding="10px" align="center"> <tr><td width="114"> <label><b>text</b></label></td> <td width="287"> <textarea name="para" cols="30" rows="10"></textarea> </td> </tr> <tr> <td> <label><b>alphabet</b></label> </td> <td><input type="text" name="character" title="enter character"> </tr> <tr> <td colspan="2" align="center"> <input id="btn" type="submit" name="submit" value="search"> </td> </tr> </table> </form>
js
<script language="javascript"> function check(form) { if(form.para.value==""){ alert("no text available search!!"); return false; } if(form.character.value=="") { alert("search keyword not enter!!"); return false; } para=new array(); index=new array(); keyword=form.character.value; para=form.para.value; found=0; k=0; for(i=0; i<para.length;i++) { if(keyword==para[i]){ found+=1; $(document).ready(function(e) { $("textarea:eq(i)").css("color","#ff0000"); }); index[k++]=i; } } if(found!=0){ alert(found+" times "+keyword+" in text"); alert("index of alphabet: "+index); return false; } else{ alert("not found in text!!"); return false; } } </script>
i'm looking solution, in css, html, js (or jquery). thanks.
as @mohamed-yousef said in comment, don't think can put tags or styles inside <textarea>
.
an alternative use user-editable <div>
. this, can put additional tags styles js.
for example:
<div contenteditable="true"> <!-- editable textarea, without of default styles , functions --> text in highlight letters. </div>
with this, if search "e", can make js script add styled elements around "e"s, <div>
(textarea) this:
<div contenteditable="true"> t<span style="background-color: yellow">e</span>xt in highlight l<span style="background-color: yellow">e</span>tt<span style="background-color: yellow">e</span>rs. </div>
try this example (which turned out well, i'm surprised).
Comments
Post a Comment