cursor in textarea

[Krzysztof Kujawski]

Hi

Is there posibility to (and how to do this):
a) add a string in the current cursor position?

b) add string before and after selection in textarea e.g. selection

c) if I put with value+='' how to move cursor to position after ] and
before [


Thanks a lot for all help.

Krzysztof Kujawski

[Yann-Erwan Perio]

Re: cursor in textarea

Krzysztof Kujawski wrote:
[color=blue]
> a) add a string in the current cursor position?[/color]

See the article by Martin Honnen
<URL:http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130>
[color=blue]
> b) add string before and after selection in textarea e.g. selection
> c) if I put with value+='' how to move cursor to position after ] and
> before [[/color]

<form>
<textarea name="ta"></textarea>
<input type="button"
onclick="surrou ndText(this.for m.elements['ta'])"
value="Surround text">
</form>

<script type="text/javascript">
function surroundText(ta ){
var rng, r2;
if(document.sel ection &&
document.select ion.type=="Text "){
rng=document.se lection.createR ange();
r2=rng.duplicat e();
if(rng.parentEl ement()==ta){
rng.text=""+rng.text+ "";
r2.select(); //to select before
//rng.select(); //to select after
}
}
}
</script>


Ranges are a very useful tool, unfortunately still remaining poorly
implemented across user agents. The example given uses IE ranges and
works only on IE; there is, currently, no way to achieve the same effect
in other browsers (although Mozilla does implement W3C ranges quite well).

<URL:http://msdn.microsoft. com/library/default.asp?url =/workshop/author/dhtml/reference/objects/obj_textrange.a sp>
<URL:http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html>


HTH
Yep.

[Krzysztof Kujawski]

Re: cursor in textarea

> <script type="text/javascript">[color=blue]
> function surroundText(ta ){
> var rng, r2;
> if(document.sel ection &&
> document.select ion.type=="Text "){
> rng=document.se lection.createR ange();
> r2=rng.duplicat e();
> if(rng.parentEl ement()==ta){
> rng.text=""+rng.text+ "";
> r2.select(); //to select before
> //rng.select(); //to select after
> }
> }
> }
> </script>[/color]
Everything works fine, but how should I change this above to put
also then when there is only cursor, no selection of text?

Krzysztof Kujawski

[Yann-Erwan Perio]

Re: cursor in textarea

Krzysztof Kujawski wrote:
[color=blue]
> Everything works fine, but how should I change this above to put
> also then when there is only cursor, no selection of text?[/color]

The approach is a bit different; if you have no selection in the
textarea, then you cannot use the selection property directly since it
will change according to the user actions.

What you need to do is therefore to store the caret position, as
demonstrated in Martin Honnen's article. If targeting only IE5.5+, you
can also use "onbeforedeacti vate" as a trigger to store the caret position.


<form>
<textarea name="ta"
onbeforedeactiv ate="storeCaret (this)"></textarea>
<input type="button"
onclick="surrou ndText(this.for m.elements['ta'])"
value="Surround text">
</form>

<script type="text/javascript">
function storeCaret(ta){
var d=document;
if(d.selection &&
d.selection.cre ateRange) {
ta.currentRange =d.selection.cr eateRange();
}
}

function surroundText(ta ){
if(ta.currentRa nge)
with(ta.current Range)
text=""+text+"";
}
</script>


HTH
Yep.