Implicit addition in TEXTAREA using Javascript

I would like to be able to create a bend type in xhtml textarea using Javascript / jQuery. For example, given the following text:

 ABC [123] DEF 

I would like [123] shrink to [] when the cursor is not above it — that is, for cursor | :

 ABC [] DEF| AB|C [] DEF ABC [|123] DEF ABC [12|3] DEF 

I want the contents in curly brackets to be preserved, of course, when the element is complex (i.e. when the cursor leaves the curly brackets) and restored when it is added (the cursor goes inside the curly brackets).

I would be very grateful for the thought of this.

Thanks.

Brian

+4
source share
2 answers

You might want to take a look at some of the Rich Text editors implemented in JavaScript. If you look at folding as an inline style (css display: none;}, I'm sure you can just add a rule to their syntax highlighting to make folding work without much effort.

10 jQuery and non-jQuery RTE

You can also see the Mozilla bespin project ( http://mozillalabs.com/bespin/ ). Can't post more links, a little new for SO.

+2
source
 $(function(){ //Format on load $(".folding").html('[]'); //Wire up load $(".folding").mouseover(function(){ $(this).html('[' + $(this).attr("original") + ']'); }).mouseout(function(){ $(this).html('[]'); }); }); <BODY>ABC <span class="folding" original='123'>[123]</span> DEF</BODY> 

This should work for you. Not the most eloquent, but gives the desired results.

0
source

Source: https://habr.com/ru/post/1314436/


All Articles