...

View Full Version : Textarea script to insert word at cursor?



Terry Cadd
02-20-2009, 05:05 AM
Hi,
I'm working on a form for visitor's messages and comments, and I need help with a Java Script to accomplish what I am looking for.
I'd like to add a row of several images, that when clicked they add text in the message area where the cursor is located.
I am looking for a script function similar to the AddWord function that I worked up below.
The script function really needs to be like an InsertWord function that inserts the word where the cursor is located.
It will work similar to adding smilie icons to your message when you post messages on some forums.
Here is the version that I've worked up with the AddWord function for an example.
This version will only add the word at the end of the textarea, not where the cursor is located.
I'd appreciate any help or examples that I can use to make this work.
Thanks for your help.
Terry
Here's an image of the html form below.
http://web2.airmail.net/terrycad/Other/InsertWord.gif


<html>
<head>
<title>Insert Icon</title>
<script>
function AddWord(word)
{
document.getElementById('message').value=document.getElementById('message').value + word;
}
</script>
</head>
<body>
<p align="center"><b>Insert Icon</b></p>
<form method="POST" action="/cgi-bin/cgiemail/websitename/sendform.cgi">
<center>
<a title="Smile"><img border="0" src="Smile.gif" onclick="AddWord('{Smile}');" width="16" height="16"></a>
<a title="Frown"><img border="0" src="Frown.gif" onclick="AddWord('{Frown}');" width="16" height="16"></a>
<br>
<textarea name="message" rows="6" cols="30" wrap></textarea>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

snowieken
02-20-2009, 03:55 PM
See if this page (http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130) gets you any further!

abduraooft
02-20-2009, 04:07 PM
I think the OP needs a rich text editor (http://www.google.com/search?q=rich+text+editor), as it's not possible to insert(and rneder) an image or any html tags into a text area.

snowieken
02-20-2009, 04:20 PM
I can't speak for the OP of course, but if I read the question correctly he is looking for a way to insert bits like "{smile}" and "{frown}" in a textarea upon clicking an image... which is basically code used to insert a smiley. Rich text editors can have that feature as well, but it is definately possible to insert text bits like that in a textarea.

Terry Cadd
02-23-2009, 02:02 AM
The program that reads in the messages and posts from the members and visitors will interpret the smiley codes and place them in their posts in the correct place. Here is a great find that I came across that does exactly what I was looking for, for smiley image codes in textareas.
Thanks, :thumbsup:
Terry



<html>
<head>
<title>Insert Word</title>
<script type="text/javascript">
<!--
function InsertWord(word) {
field = document.getElementById('message');
if (document.selection) {
field.focus();
var sel = document.selection.createRange();
sel.text = word;
sel.select();
} else if (field.selectionStart || field.selectionStart == '0') {
var start = field.selectionStart;
var end = field.selectionEnd;
var scroll = field.scrollTop;
field.value = field.value.substring(0, start) + word + field.value.substring(end, field.value.length);
field.focus();
field.selectionStart = start + word.length;
field.selectionEnd = start + word.length;
field.scrollTop = scroll;
} else {
field.value += word;
field.focus();
}
}
//-->
</script>
</head>
<body>
<p align="center"><b>Insert Word</b></p>
<form method="POST" action="/cgi-bin/cgiemail/websitename/sendform.cgi">
<center>
<a title="Smile"><img border="0" src="Smile.gif" onclick="InsertWord('{Smile}');" width="16" height="16"></a>
<a title="Frown"><img border="0" src="Frown.gif" onclick="InsertWord('{Frown}');" width="16" height="16"></a>
<br>
<textarea name="message" rows="6" cols="30" wrap></textarea>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

jmrker
02-23-2009, 02:28 AM
Needs one small change to make work correctly


<textarea id="message" name="message" rows="6" cols="30" wrap></textarea>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum