Is there a way to insert text into a TextArea at the caret position, rather than at the end of the box?
Printable View
Is there a way to insert text into a TextArea at the caret position, rather than at the end of the box?
Quote:
Originally posted by The Hobo
Is there a way to insert text into a TextArea at the caret position, rather than at the end of the box?
here you go, i put together a example for you.
Hope this helps.
Danial
Code:<html>
<head>
<script>
function insert(txt)
{
var d;
d=document.form1.txtBody;
insertAtCaret(d, txt);
}
function storeCaret (textEl) {
if (textEl.createTextRange)
textEl.caretPos = document.selection.createRange().duplicate();
}
function insertAtCaret (textEl, text) {
if (textEl.createTextRange && textEl.caretPos) {
var caretPos = textEl.caretPos;
caretPos.text =
caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
text + ' ' : text;
}
else
textEl.value =textEl.value+ text;
}
</script>
<body>
<a href="JavaScript:insert(' test ')">Insert Text</a>
<form name=form1>
<textarea name="txtBody" rows="20" cols="60" style="WIDTH: 100%" ONSELECT="storeCaret(this);" ONCLICK="storeCaret(this);" ONKEYUP="storeCaret(this);">
Hello there, this is an example of how to enter text at the caret position.
</textarea>
</form>
</body>
</html>
BTW, i have only tested this in IE not in any browser, please let me know if it works on any other browser.
thanks
Danial
Works perfectly in IE. Thanks :)
I had to doctor it up a bit, though.
Well like i said it was an example, i took it out of one of my project, and it was broken down in diffrent files and in the example here i cut and pasted it. so there might be erros. !!!Quote:
Originally posted by The Hobo
I had to doctor it up a bit, though.
What bits did u doctor up !!
Anyway glad i could help u out.
I'm quite sure this works ONLY in IE though, but can't test right now.
Not even sure if this thing is possible in Moz, would have to check...
Checked the Mozilla source, there is currently no special support for textarea manipulations.
Yes i remember now that i looked all over to find some code which will achieve the same thing in NS and other browser., but was unable to find any.Quote:
Originally posted by CornedBee
Checked the Mozilla source, there is currently no special support for textarea manipulations.
I doubt its even possible, i think even vB Forum doesnt have the feature in NS.
Danial
I revisited this because I didn't like the fact that this feature only worked in IE for my application. After doing some searching on the web, I've put together this code.
The code was tested (and works fine) in:
FireFox 0.8
Netscape 7.1
Internet Explorer 5.5/6.0
Mozilla 1.7
Let me know if there are any improvements/suggestions. Otherwise, there it is for whoever's interested.Code:<html>
<head>
<title></title>
<script type="text/javascript">
function insertAtCaret(input, textString) {
if (input.setSelectionRange) {
var selectionStart = input.selectionStart;
var selectionEnd = input.selectionEnd;
input.value = input.value.substring(0, selectionStart) + textString + input.value.substring(selectionEnd);
} else if (document.selection) {
var range = document.selection.createRange();
if (range.parentElement() == input) {
var isCollapsed = range.text == '';
range.text = textString;
if (!isCollapsed) {
range.moveStart('character', -textString.length);
range.select();
}
} else {
var caretPos = input.caretPos;
caretPos.text = textString;
}
} else {
input.value = input.value + textString;
}
}
function storeCaret (input) {
if (input.createTextRange) {
input.caretPos = document.selection.createRange().duplicate();
}
}
</script>
</head>
<body>
<form name="formName">
<input type="button" value=" insert " onclick="insertAtCaret(this.form.inputName, 'asdf');" />
<br />
<textarea cols="20" rows="10" name="inputName" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" style="width: 400px;">Kibology</textarea>
</form>
</body>
</html>
Also, if anyone tests this in a browser/version that I haven't, please let me know how it goes.
Moz 1.8a works fine.
Isn't it the same version of Gecko? Does it really matter if you test it in both normal 'heavy' MoZilla and FireFox ?Quote:
Originally posted by CornedBee
Moz 1.8a works fine.
More or less the same, yeah. Just wanted to post ;)
Good work :). I will put it in my Code Library, i am sure it will come very handy.
Danial