shaggy_the_sheep
asked on
Insert Text Into Textarea at Cursor Position
Hi
I have a page that allows the user to enter text into a textarea wherever they have the cursor placed using a button. This allows them to enter HTML markup simply. It works okay in IE but in FireFox it simply overwrites any data that was previously in the box
Heres the page:
http://www.fast-chat.co.uk/insertText.htm
Any help would be greatly appreciated.
Thanks,
Richard
I have a page that allows the user to enter text into a textarea wherever they have the cursor placed using a button. This allows them to enter HTML markup simply. It works okay in IE but in FireFox it simply overwrites any data that was previously in the box
Heres the page:
http://www.fast-chat.co.uk/insertText.htm
Any help would be greatly appreciated.
Thanks,
Richard
Oops...
This line...
tArea.value = selStart + open + arguments[2] + "]" + curSelection + end + selEnd;
Should be this...
tArea.value = selStart + open + arguments[2] + ">" + curSelection + end + selEnd;
It was my UBBC / Smiley function previously, just modified for HTML tags :)
This line...
tArea.value = selStart + open + arguments[2] + "]" + curSelection + end + selEnd;
Should be this...
tArea.value = selStart + open + arguments[2] + ">" + curSelection + end + selEnd;
It was my UBBC / Smiley function previously, just modified for HTML tags :)
ASKER
Hi
That works great! Just one last thing though...
The cursor does not enter the form field in the correct place. The way i had it before it enter the cursor between the tags,eg <b>|</b> (sorta like that)
This is the function is used to do it...
function setCursorPosition(oInput,o Start,oEnd ) {
if( oInput.setSelectionRange ) {
oInput.setSelectionRange(o Start,oEnd );
}
else if( oInput.createTextRange ) {
var range = oInput.createTextRange();
range.collapse(true);
range.moveEnd('character', oEnd);
range.moveStart('character ',oStart);
range.select();
}
}
i guess oInout would be tArea, but im not sure about oStart or oEnd
Thanks
Richard
That works great! Just one last thing though...
The cursor does not enter the form field in the correct place. The way i had it before it enter the cursor between the tags,eg <b>|</b> (sorta like that)
This is the function is used to do it...
function setCursorPosition(oInput,o
if( oInput.setSelectionRange ) {
oInput.setSelectionRange(o
}
else if( oInput.createTextRange ) {
var range = oInput.createTextRange();
range.collapse(true);
range.moveEnd('character',
range.moveStart('character
range.select();
}
}
i guess oInout would be tArea, but im not sure about oStart or oEnd
Thanks
Richard
Give this a try, I think I got it...
<html>
<head>
<title>Insert Text</title>
<script type="text/javascript">
<!--
function insert(open, end){
var tArea = document.tform.tarea;
var isIE = (document.all)? true : false;
var open = (open)? open : "";
var end = (end)? end : "";
var poss = 0;
var pose = 1;
if(isIE){
tArea.focus();
var curSelect = document.selection.createR ange();
if(arguments[2]){
curSelect.text = open + arguments[2] + ">" + curSelect.text + end;
} else {
curSelect.text = open + curSelect.text + end;
}
pos = ((arguments[1])? (tArea.value.lastIndexOf(a rguments[1 ])) : tArea.value.lastIndexOf(ar guments[0] ) + arguments[0].length);
} else if(!isIE && typeof tArea.selectionStart != "undefined"){
var selStart = tArea.value.substr(0, tArea.selectionStart);
var selEnd = tArea.value.substr(tArea.s electionEn d, tArea.value.length);
var curSelection = tArea.value.replace(selSta rt, '').replace(selEnd, '');
if(arguments[2]){
tArea.value = selStart + open + arguments[2] + ">" + curSelection + end + selEnd;
} else {
tArea.value = selStart + open + curSelection + end + selEnd;
}
poss = tArea.selectionStart;
pose = (tArea.selectionEnd - ((arguments[1])? arguments[1].length : arguments[0].length));
} else {
tArea.value += (arguments[2])? open + arguments[2] + ">" + end : open + end;
}
tArea.focus();
setCursorPosition(tArea, poss, pose);
}
function setCursorPosition(oInput,o Start,oEnd ) {
if(oInput.setSelectionRang e ) {
oInput.setSelectionRange(o Start,oEnd );
} else if( oInput.createTextRange ) {
var range = oInput.createTextRange();
range.collapse(true);
range.moveEnd('character', oEnd);
range.moveStart('character ',oStart);
range.select();
}
}
//-->
</script>
</head>
<body>
<form name="tform">
<input type="button" onclick="insert('<b>', '</b>')" value="Bold" />
<input type="button" onclick="insert('<i>', '</i>')" value="Italic" />
<input type="button" onclick="insert('<strike>' , '</strike>')" value="Strike" />
<input type="button" onclick="insert('<hr>')" value="HR" />
<input type="button" onclick="insert(':)')" value=" :) " />
<br />
<textarea cols="40" rows="5" name="tarea"></textarea>
</form>
</body>
</html>
<html>
<head>
<title>Insert Text</title>
<script type="text/javascript">
<!--
function insert(open, end){
var tArea = document.tform.tarea;
var isIE = (document.all)? true : false;
var open = (open)? open : "";
var end = (end)? end : "";
var poss = 0;
var pose = 1;
if(isIE){
tArea.focus();
var curSelect = document.selection.createR
if(arguments[2]){
curSelect.text = open + arguments[2] + ">" + curSelect.text + end;
} else {
curSelect.text = open + curSelect.text + end;
}
pos = ((arguments[1])? (tArea.value.lastIndexOf(a
} else if(!isIE && typeof tArea.selectionStart != "undefined"){
var selStart = tArea.value.substr(0, tArea.selectionStart);
var selEnd = tArea.value.substr(tArea.s
var curSelection = tArea.value.replace(selSta
if(arguments[2]){
tArea.value = selStart + open + arguments[2] + ">" + curSelection + end + selEnd;
} else {
tArea.value = selStart + open + curSelection + end + selEnd;
}
poss = tArea.selectionStart;
pose = (tArea.selectionEnd - ((arguments[1])? arguments[1].length : arguments[0].length));
} else {
tArea.value += (arguments[2])? open + arguments[2] + ">" + end : open + end;
}
tArea.focus();
setCursorPosition(tArea, poss, pose);
}
function setCursorPosition(oInput,o
if(oInput.setSelectionRang
oInput.setSelectionRange(o
} else if( oInput.createTextRange ) {
var range = oInput.createTextRange();
range.collapse(true);
range.moveEnd('character',
range.moveStart('character
range.select();
}
}
//-->
</script>
</head>
<body>
<form name="tform">
<input type="button" onclick="insert('<b>', '</b>')" value="Bold" />
<input type="button" onclick="insert('<i>', '</i>')" value="Italic" />
<input type="button" onclick="insert('<strike>'
<input type="button" onclick="insert('<hr>')" value="HR" />
<input type="button" onclick="insert(':)')" value=" :) " />
<br />
<textarea cols="40" rows="5" name="tarea"></textarea>
</form>
</body>
</html>
ASKER
Wow thats quite a turn around...it not works in FireFox and not in IE!! :-D
Any ideas how to make it work in IE??
Sorry about this
Thanks,
Richard
Any ideas how to make it work in IE??
Sorry about this
Thanks,
Richard
ASKER
it NOW works in FireFox..sorry
I have to goto work, so i'll have a look at this tonight, i'm sure it's something simple :)
ASKER
Okay no probs!! Thanks..
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi no probs about the delay! It works in IE apart from one niggling thing...
If you press enter to go onto the next line then the cursor moves along too far by one. Doesnt do this in FireFox though..
Any thoughts?
Thanks alot
Richard
If you press enter to go onto the next line then the cursor moves along too far by one. Doesnt do this in FireFox though..
Any thoughts?
Thanks alot
Richard
ASKER
Hi i think ive sorted the IE problem....
Heres the butchered function!
function setCursorPosition(oInput,o Start,oEnd ) {
if(oInput.setSelectionRang e ){
oInput.setSelectionRange(o Start,oEnd );
}
else if( oInput.createTextRange ){
var pos = 0;
var newLine = 0;
var text = oInput.value
while (pos < oStart){
if(text.substring(pos,oSta rt).indexO f('\n') > -1){
newLine++;
pos = pos + text.substring(pos,oStart) .indexOf(' \n') + 2;
}
else{
pos = oStart;
}
}
oStart = oStart - newLine;
oEnd = oEnd - newLine;
var range = oInput.createTextRange();
range.collapse(true);
range.moveEnd('character', oEnd);
range.moveStart('character ',oStart);
range.select();
}
}
Not exactly the most elegant solution...but it works! :D
Thanks for all your help!
Richard
Heres the butchered function!
function setCursorPosition(oInput,o
if(oInput.setSelectionRang
oInput.setSelectionRange(o
}
else if( oInput.createTextRange ){
var pos = 0;
var newLine = 0;
var text = oInput.value
while (pos < oStart){
if(text.substring(pos,oSta
newLine++;
pos = pos + text.substring(pos,oStart)
}
else{
pos = oStart;
}
}
oStart = oStart - newLine;
oEnd = oEnd - newLine;
var range = oInput.createTextRange();
range.collapse(true);
range.moveEnd('character',
range.moveStart('character
range.select();
}
}
Not exactly the most elegant solution...but it works! :D
Thanks for all your help!
Richard
<html>
<head>
<title>Insert Text</title>
<script type="text/javascript">
<!--
function insert(open, end){
var tArea = document.tform.tarea;
var isIE = (document.all)? true : false;
var open = (open)? open : "";
var end = (end)? end : "";
if(isIE){
tArea.focus();
var curSelect = document.selection.createR
if(arguments[2]){
curSelect.text = open + arguments[2] + ">" + curSelect.text + end;
} else {
curSelect.text = open + curSelect.text + end;
}
} else if(!isIE && typeof tArea.selectionStart != "undefined"){
var selStart = tArea.value.substr(0, tArea.selectionStart);
var selEnd = tArea.value.substr(tArea.s
var curSelection = tArea.value.replace(selSta
if(arguments[2]){
tArea.value = selStart + open + arguments[2] + "]" + curSelection + end + selEnd;
} else {
tArea.value = selStart + open + curSelection + end + selEnd;
}
} else {
tArea.value += (arguments[2])? open + arguments[2] + ">" + end : open + end;
}
}
//-->
</script>
</head>
<body>
<form name="tform">
<input type="button" onclick="insert('<b>', '</b>')" value="Bold" />
<input type="button" onclick="insert('<i>', '</i>')" value="Italic" />
<input type="button" onclick="insert('<strike>'
<input type="button" onclick="insert('<hr>')" value="HR" />
<input type="button" onclick="insert(':)')" value=" :) " />
<br />
<textarea cols="40" rows="5" name="tarea"></textarea>
</form>
</body>
</html>
Just change this line to point to your forms textarea.
var tArea = document.tform.tarea;