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]

Krzysztof Kujawski wrote:

a) add a string in the current cursor position?
See the article by Martin Honnen
<URL:http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130>
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 [

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

<script type="text/javascript">
function surroundText(ta){
var rng, r2;
if(document.selection &&
document.selection.type=="Text"){
rng=document.selection.createRange();
r2=rng.duplicate();
if(rng.parentElement()==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.asp>
<URL:http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html>
HTH
Yep.

[Krzysztof Kujawski]

> <script type="text/javascript">

function surroundText(ta){
var rng, r2;
if(document.selection &&
document.selection.type=="Text"){
rng=document.selection.createRange();
r2=rng.duplicate();
if(rng.parentElement()==ta){
rng.text=""+rng.text+"";
r2.select(); //to select before
//rng.select(); //to select after
}
}
}
</script>

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]

Krzysztof Kujawski wrote:

Everything works fine, but how should I change this above to put
also then when there is only cursor, no selection of text?

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 "onbeforedeactivate" as a trigger to store the caret position.
<form>
<textarea name="ta"
onbeforedeactivate="storeCaret(this)"></textarea>
<input type="button"
onclick="surroundText(this.form.elements['ta'])"
value="Surround text">
</form>

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

function surroundText(ta){
if(ta.currentRange)
with(ta.currentRange)
text=""+text+"";
}
</script>
HTH
Yep.