Forum Moderators: open

Message Too Old, No Replies

textarea cursor position woes

Trying to wrap tags around the cursor position

         

sporkstorms

11:15 pm on Feb 11, 2006 (gmt 0)

10+ Year Member



I'm trying to insert forum-style tags around the cursor position in a textarea.
For example, if you hit the button, it will insert START_TAG END_TAG with your cursor positioned inbetween.

Everything works fine in Safari and Mozilla, but IE (tested with 6.0) is being troublesome.
I *almost* have it working, but when there are newlines in the box, it messes up the cursor placement.

The relevant code is below.


var sel = document.selection.createRange();

// Get current cursor point
var storedRange = sel.duplicate();
storedRange.moveToElementText(myField);
storedRange.setEndPoint('EndToEnd', sel);
var cursorPoint = storedRange.text.length - sel.text.length + edButtons[i].tagStart.length;

// Add the text
sel.text = edButtons[i].tagStart + edButtons[i].tagEnd;

// This seems to work, but breaks when you have newlines/linebreaks in the textarea
var textRange = myField.createTextRange();
textRange.collapse(true);//go to beginning of range
textRange.moveEnd('character', cursorPoint);
textRange.moveStart('character', cursorPoint);
textRange.select();

[edited by: DrDoc at 11:18 pm (utc) on Feb. 11, 2006]

Little_G

11:57 pm on Feb 11, 2006 (gmt 0)

10+ Year Member



Hello,

The following little bit of code return interesting results that might explain your incorrect cursor placment:


<html><head><title>test</title>
<script>
function count(){
alert(document.getElementById('textfield').value.length);
}
</script>
</head>
<body>
<textarea id="textfield">
line
line</textarea>
<input type="submit" onclick="count()">
</body></html>

Firefox 1.5.0.1 returns 9
Internet 7 beta 2 returns 10

I can't definitely say what causes this but I would guess that Internet Explorer counts newlines as two characters.

Hope that helps.

Andrew

sporkstorms

12:20 am on Feb 12, 2006 (gmt 0)

10+ Year Member



Thanks little_g, that's very interesting.
I'll definitely give it some more investigation.

[edited by: DrDoc at 12:53 am (utc) on Feb. 12, 2006]
[edit reason] See TOS #13, #21, #24 and sticky mail :) [/edit]

Little_G

12:31 am on Feb 12, 2006 (gmt 0)

10+ Year Member



Luckily I followed your link before it was removed!

I think I was right about IE treating newlines as 2 characters, see example


<html><head><title>test</title>
<script>
function count(){
var elem = document.getElementById('textfield').value;
for(i=0;i<elem.length;i++){
alert(elem.charAt(i));
}
}
</script>
</head>
<body>
<textarea id="textfield">
line
line</textarea>
<input type="submit" onclick="count()">
</body></html>

IE gives you 2 blank messages, firefox 1.

PS. if found this site don't know if it's any use,
http://the-stickman.com/web-development/javascript/finding-selection-cursor-position-in-a-textarea-in-internet-explorer/ [the-stickman.com]

sporkstorms

1:46 am on Feb 12, 2006 (gmt 0)

10+ Year Member



The cursor position calculation is definitely messed up by this behavior in IE.

If you put the cursor at the end of the line, or the start of the next, it shows the same cursor position.

[edited by: DrDoc at 4:16 pm (utc) on Feb. 13, 2006]
[edit reason] No personal URLs. See TOS. [/edit]

Little_G

2:39 am on Feb 12, 2006 (gmt 0)

10+ Year Member



By removing '\r' characters IE does return the correct string length:

<html><head><title>test</title>
<script>
function count(){
var elem = document.getElementById('textfield').value;
var r = "";
for (i=0;i<elem.length;i++) {
if (elem.charAt(i)!= '\r') {
r += elem.charAt(i);
}
}
alert(r.length);
for(j=0;j<elem.length;j++){
alert(r.charAt(j));
}
}
</script>
</head>
<body>
<textarea id="textfield">
line
line</textarea>
<input type="submit" onclick="count()">
</body></html>

But I don't know if this can be implemented easily into your code.
IE doesn't give you 2 blank message boxes in the middle anymore.