{"id":2853,"date":"2013-03-01T02:05:52","date_gmt":"2013-03-01T08:05:52","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=2853"},"modified":"2013-03-01T16:15:12","modified_gmt":"2013-03-01T22:15:12","slug":"highlighting-textareas","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2013\/03\/01\/highlighting-textareas\/","title":{"rendered":"Highlighting <code>textarea<\/code>s"},"content":{"rendered":"<p>I liked the hack that I used in the <a href=\"\/blog\/blogfiles\/bililiteRange.util.html\">bililiteRange utilities demo<\/a> to highlight the ranges in a <code class=\"language-html\" >textarea<\/code>: creating a \"shadow\" <code class=\"language-html\" >pre<\/code>element and using that to set the background of the desired text. It's based on this <a href=\"http:\/\/trinithis.awardspace.com\/regexTester\/regexTester.html\">trick<\/a> (explained in a <a href=\"http:\/\/www.dynamicdrive.com\/forums\/showthread.php?22040-Colorizing-Textarea\">ddforum post<\/a>) by someone with a screen name of Trinithis.<\/p>\r\n<p>I put it into a jQuery plugin, <code class=\"language-javascript\" >$.fn.texthighlight(bounds, id, color)<\/code> that lets you quickly highlight a section of text in a <code class=\"language-html\" >textarea<\/code> that will scroll with the text (having the highlighting stay with the text as it's edited is a different story; see the source for the <a href=\"\/blog\/blogfiles\/bililiteRange.util.html\">bililiteRange utilities demo<\/a> for that). It is a hack, and remains flaky (especially for Internet Explorer, for which I cannot get <code class=\"language-css\" >white-space: pre-wrap<\/code> to work consistently).\r\n<p><a href=\"\/inc\/jquery.texthighlight.js\">Download the code<\/a>.<\/p>\r\n<p><a href=\"\/blog\/blogfiles\/vi\/texthighlight.html\">See the demo<\/a>.<\/p>\r\n<h3>Parameters<\/h3>\r\n<dl>\r\n<dt><code>bounds<\/code><\/dt>\r\n<dd><code>{Array [start, end]} | \"remove\" | \"delete\"<\/code>. Required. The starting and ending character positions to highlight. <code class=\"language-javascript\" >\"remove\"<\/code> removes the given highlighter, and <code class=\"language-javascript\" >\"delete\"<\/code> removes all of them and cleans up the wrapping element and data.<\/dd>\r\n<dt><code>id<\/code><\/dt>\r\n<dd><code>{String}<\/code>. Optional; if falsy, uses <code class=\"language-javascript\" >\"default\"<\/code>. An arbitrary string to identify the highighter for future changing or removing.<\/dd>\r\n<dt><code>color<\/code><\/dt>\r\n<dd><code>{String}<\/code>. Optional; if falsy, uses <code class=\"language-javascript\" >\"#f0f\"<\/code> (a nice, bright magenta: <span style=\"background: #f0f\">&nbsp;&nbsp;&nbsp;<\/span>). The CSS color to use for the highighting (at 0.25 opacity).<\/dd>\r\n<\/dl>\r\n<h3>Events<\/h3>\r\n<p>After highlighting, triggers a <code class=\"language-javascript\" >\"texthighlight\"<\/code> event, with parameters <code class=\"language-javascript\" >[span, bounds]<\/code> where <code class=\"language-javascript\" >span<\/code> is a jQuery collection with one item, the highlighter elemeent, and <code class=\"language-javascript\" >bounds<\/code> is the array originally passed into the plugin. So <code class=\"language-javascript\" >$('textarea').on('texthighlight', function (event, span, bounds) {span[0].scrollIntoView()})<\/code> will scroll the highlighted area to the top of the window whenever the highlighter is set.<\/p>","protected":false},"excerpt":{"rendered":"I liked the hack that I used in the bililiteRange utilities demo to highlight the ranges in a textarea: creating a \"shadow\" preelement and using that to set the background of the desired text. It's based on this trick (explained in a ddforum post) by someone with a screen name of Trinithis. I put it [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2853"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=2853"}],"version-history":[{"count":6,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2853\/revisions"}],"predecessor-version":[{"id":2859,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2853\/revisions\/2859"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=2853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=2853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=2853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}