Insert text in the middle of a textarea 1

grtfercho · May 14, 2003

Hi everyone.
I have a form that's used by a group of employees to send out an email to people.
In the form I have a textarea where the body of the message goes and I also have a Combo Box with some pre-set values that come from the database for that particular company. ( company name, company ID, Some specific dates, etc.)
Whenever somebody selects Company Name from the combo box the company name gets inserted at the end of the textarea.
If they select Contact Person then the name of a person gets inserted at the end of textarea.

This is working with no problems. Now my question is ...
If I have a message already in the textarea and move the cursor to someplace in the middle of the message how can I insert the value from the combobox in the middle of the lines?
hope this makes sense. I'll try to get a stripped version of my page and post it later.
in the meantime thanks for any help.

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein

grtfercho · May 14, 2003

OK here it is....
<script>

</script>
<form name="somename">
<select name='dbvalues' onChange='insertVal(this.form)'>
<option selected>--- Insert Database Values ---</option>
<option value='06/22/2003'>Due Date</option>
<option value='ABC Solutions'>Company Name</option>
<option value='31189'>Company Id</option>
<option value='20020149'>Case Id</option>
<option value='04/22/2002'>Contact Date</option>
<option value='05/14/2003'>Todays date</option>

</select>
<textarea name="fupcomm" cols="70" rows="9" >Try to select one of the options.</textarea>

</form>

now the idea is to insert the values from the combo Box let's say after the word "Try".

Is there any property that gives me the position of the cursor inside the Textarea??

thanks in advance

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein

greedyzebra · May 14, 2003

Wouldn't you want the information appended to the end of the new text in the text area?

(May have an answer for you, just need to clarify)

greedyzebra · May 14, 2003

Never mind. I see what you're saying now...

grtfercho · May 14, 2003

That part is already working if you test the code provided it will append the values with no problems to the end of the text.
Now that was not an issue until someone here forgot to enter a value and wanted to insert it at the beginning of the message.
The best way(the only way actually) to do this has been just to insert the value at the end and from there cut&paste to the desired position.

Could I use onBlur to save the last place where the cursor was and then insert it there?
If yes how could I know what the last position of the cursor was?

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein

greedyzebra · May 14, 2003

Interesting question. My search turned up this:

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20192843.html

greedyzebra · May 14, 2003

Ah. Where there's a will, there's a way. I doubt if this will work for anything other than IE, though.

<html>
<body>
<script language="javaScript">
function storeCaret(obj)
{
if (obj.createTextRange)
obj.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;
textEl.focus();
}
else
textEl.value = text;
}

function insertText(obj)
{
var sValue;
//get the selected value
for (var i=0; i < obj.length; i++)
{
if (obj.selected == true)
{
sValue = obj.value;

}
}

var t = document.getElementById('txtArea');

if (t.caretPos)
{
insertAtCaret(t, sValue);
}
else
{
sValue = "\n" + sValue;
t.value += sValue;
}
}
</script>
<form method="POST">
<p><textarea rows="10" name="S1" cols="80" id="txtArea" ONSELECT="storeCaret(this);"
ONCLICK="storeCaret(this);"
ONKEYUP="storeCaret(this);">Try to select one of the options</textarea></p>
<p><select size="1" name="options" onchange="insertText(this)">
<option value="Due Date">Opt 1</option>
<option value="Contact Name">Opt 2</option>
<option value="Company Name">Opt 3</option>
</select></p>
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
</body>
</html>

grtfercho · May 14, 2003

I found the same script and after making a search for caretPos and createtextRange it seems that this is the only script out there.
I found something that might work on Mozilla 1.3+ @

http://www.faqts.com/knowledge_base/view.phtml/aid/13562/fid/130

------------------------------------------------------------
<html> <head> <title> manipulating the selection in an <input type="text" /> element
</title> <script type="text/javascript"> function setSelectionRange(input, selectionStart, selectionEnd) {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}
function setCaretToEnd (input) {
setSelectionRange(input, input.value.length, input.value.length);
}
function setCaretToBegin (input) {
setSelectionRange(input, 0, 0);
}
function setCaretToPos (input, pos) {
setSelectionRange(input, pos, pos);
}
function selectString (input, string) {
var match = new RegExp(string, "i&quot

.exec(input.value);
if (match) {
setSelectionRange (input, match.index, match.index + match
[0].length);
}
}
function replaceSelection (input, replaceString) {
if (input.setSelectionRange) {
var selectionStart = input.selectionStart;
var selectionEnd = input.selectionEnd;
input.value = input.value.substring(0, selectionStart)
+ replaceString
+ input.value.substring(selectionEnd);
if (selectionStart != selectionEnd) // has there been a selection
setSelectionRange(input, selectionStart, selectionStart +
replaceString.length);
else // set caret
setCaretToPos(input, selectionStart + replaceString.length);
}
else if (document.selection) {
var range = document.selection.createRange();
if (range.parentElement() == input) {
var isCollapsed = range.text == '';
range.text = replaceString;
if (!isCollapsed) { // there has been a selection
//it appears range.select() should select the newly
//inserted text but that fails with IE
range.moveStart('character', -replaceString.length);
range.select();
}
}
}
}
</script> </head> <body> <form name="formName"> <input name="inputName"
type="text"
value="Kibology"
/> <input type="button"
value="set selection range to 4, 8"
onclick="window.setSelectionRange(this.form.inputName, 4, 8);"
/> <input type="button"
value="set caret to end"
onclick="setCaretToEnd(this.form.inputName);"
/> <input type="button"
value="set caret to start"
onclick="setCaretToBegin(this.form.inputName);"
/> <input type="button"
value="select string"
onclick="selectString(this.form.inputName,
prompt('string to search for?', 'bolo'));"
/> <input type="button"
unselectable="on"
value="replace selection with Kibo"
onclick="replaceSelection (this.form.inputName, 'Kibo');"
/> </form> </body> </html>
------------------------------------------------------------

Thanks for the effort greedy. But all this gives me enough arguments to tell the people here that it can be done but NN users will have problems. That should be enough for them to reconsider.

If anybody has a solution for NN please don't be shy.

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Insert text in the middle of a textarea 1

grtfercho

Programmer

grtfercho

Programmer

greedyzebra

Technical User

greedyzebra

Technical User

grtfercho

Programmer

greedyzebra

Technical User

greedyzebra

Technical User

grtfercho

Programmer

Similar threads

Part and Inventory Search

Sponsor