469,360 Members | 1,577 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,360 developers. It's quick & easy.

Click on a picture, insert text in a text box: how?

I'm trying to make a webpage do the following:

I want a user to be able to click on a given image (there will be more than
one image). Upon clicking a given image, characters specific to that image
will be inserted into a textbox which is actually a text area. If the
cursor is in the textbox/textarea then the characters are to be inserted at
the cursor location. This means if the cursor is between some text then the
characters need to be inserted in between the text exactly where the cursor
is. If the cursor is not in the textbox/textarea then the characters need
to be displayed at the end of any text or at the start if there is no text
present. Keep in mind the characters to be inserted will be unique to a
given image. There will be only one textbox/textarea on the pages I'm
wanting to do this on.

I know a bit about Javascript but am far from an expert. I found a webpage
that does this and copied the code from it. Can't get it working though.
I'm getting a java error as a matter of fact. No idea why. Does anyone
have a link handy I can go to see a simple example of this without a large
amount of stuff on the webpage so I can easily extract the code? The
webpage I found, when I save the source file, is huge and it's hard to pick
the code out of it although I thought I correctly got it all. Or, perhaps
someone can post the code in a response to this message aloing with some
short HTML as an example? Thanks!

Chris Smith
Jul 23 '05 #1
12 8105
On Mon, 9 Aug 2004 22:07:51 -0400, who be dat? wrote:
I'm getting a java error as a matter of fact.


If it is Javascript, you should be getting
a Javascript error as it happens. They are
different languages..

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 23 '05 #2
Yeah, it's Javascript. As far as I know, it's stated such in the code
correctly. When I said Java, that was a mistake in my newspost. Any ideas
on some code that will do this? Thanks!

Chris Smith

"Andrew Thompson" <Se********@www.invalid> wrote in message
news:k8*****************************@40tude.net...
On Mon, 9 Aug 2004 22:07:51 -0400, who be dat? wrote:
I'm getting a java error as a matter of fact.


If it is Javascript, you should be getting
a Javascript error as it happens. They are
different languages..

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

Jul 23 '05 #3
On Tue, 10 Aug 2004 07:24:17 -0400, who be dat? wrote:
Yeah, it's Javascript. As far as I know, it's stated such in the code
correctly. When I said Java, that was a mistake in my newspost. Any ideas
on some code that will do this?


(chuckles) It was a typo? Sorry, just wanted
to check we were all on the same page..

I'll leave the intelligent and erudite responses
for the JS gurus.. (No, I am *not* one of them,
I am a mere Java programmer/web designer who lurks
here to gain tips from the aforementioned.)

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 23 '05 #4
who be dat? wrote on 10 aug 2004 in comp.lang.javascript:
Upon clicking a given image, characters specific to that image
will be inserted into a textbox which is actually a text area.
easy
If the
cursor is in the textbox/textarea then the characters are to be
inserted at the cursor location. This means if the cursor is between
some text then the characters need to be inserted in between the text
exactly where the cursor is.
Impossible, for so far as I know.
I know a bit about Javascript but am far from an expert. I found a
webpage that does this and copied the code from it.
Show us the URL, please.
Can't get it working though.


As expected? ;-)

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 23 '05 #5
Hey Evertjan,

This is something common to phpBBB/phpNuke when you post messages or reply
to them. In the center of a screen is a textbox where you can enter your
text. Just on the left is a column of small images (I think the column is
titled emoticons or something like that). Clicking on an image will insert
some characters into the text as I described below (in between text or at
the end of text as I described below). You can see this in action at any of
the many sites that use this bulletinboard. One such place I like to
frequent a lot is AMDZone.com at www.amdzone.com .

Register with the site then go to the forums, find a topic, and reply to it.
Be sure to hit the 'Post Reply' button and not look at the 'Quick Reply'
section at the bottom of each page. Notice that clicking on an icon inserts
characters representing that icon into the text box whereever the cursor is
at. If the cursor isn't in the textbox, the characters are inserted into
the box at the end of the text currently in the box or at the beginning of
the box if no text has been entered.

I would post the JS code I stripped from the site page but I need to be
running out the door in about 20 seconds. If you need it, let me know and
I'll post it later on when I get back tonight. Thanks for any assistance.

Chris Smith

"Evertjan." <ex**************@interxnl.net> wrote in message
news:Xn********************@194.109.133.29...
who be dat? wrote on 10 aug 2004 in comp.lang.javascript:
Upon clicking a given image, characters specific to that image
will be inserted into a textbox which is actually a text area.


easy
If the
cursor is in the textbox/textarea then the characters are to be
inserted at the cursor location. This means if the cursor is between
some text then the characters need to be inserted in between the text
exactly where the cursor is.


Impossible, for so far as I know.
I know a bit about Javascript but am far from an expert. I found a
webpage that does this and copied the code from it.


Show us the URL, please.
Can't get it working though.


As expected? ;-)

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Jul 23 '05 #6
On Mon, 9 Aug 2004 22:07:51 -0400, who be dat? <wh******@dot.com> wrote:
I want a user to be able to click on a given image (there will bemore
than one image). Upon clicking a given image, charactersspecific to
that image will be inserted into a textbox which isactually a text area.
No problem there. I take it this will be used in a forum (or something
similar) to insert smilies or formatting code?
If the cursor is in the textbox/textarea then the characters are tobe
inserted at the cursor location. This means if the cursor isbetween
some text then the characters need to be inserted inbetween the text
exactly where the cursor is.
Ah. This is a problem. There is no standard way to get the current
location of the carat within a control in all browsers. Some browsers may
provide proprietary properties or methods to obtain this information (IE
does), but I expect most will not.
If the cursor is not in the textbox/textarea then the charactersneed to
be displayed at the end of any text or at the start ifthere is no text
present.


This adds another problem. There is no intrinsic way to determine whether
a control has focus. You would have to track it yourself with focus/blur
events.

I'll mention now that writing code specific to IE is not my forte (I
despise the browser, so I spend little time with it). The code below does
essentially what you want, though.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Test</title>

<script type="text/javascript">
if(document.getElementById) {
var getRefById = function(id) {
return document.getElementById(id);
};
} else if(document.all) {
var getRefById = function(id) {
return document.all[id];
};
} else {
var getRefById = function() {
return null;
};
}

function insertText(str) {
var e = getRefById('test'), s = null, r = null;

if(e) {
if((s = document.selection) && s.createRange) {
var repos = false;

/* Element must have focus otherwise text
* will be written into other elements. */
e.focus();
if((r = s.createRange())) {
if(r.text.length) {repos = true;}
r.text = str;
/* Clear the selection to stop continuous
* overwriting of inserted text. */
if(repos && s.empty) {s.empty();}
}
} else {
e.value += str;
}
}
}
</script>
</head>

<body>
<div>
<img src="happy.png" alt="Happy" onclick="insertText(':)')">
<img src="sad.png" alt="Sad" onclick="insertText(':(')">
</div>
<div>
<textarea id="test" cols="50" rows="5"></textarea>
</div>
</body>
</html>

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail
Jul 23 '05 #7

No problem there. I take it this will be used in a forum (or something
similar) to insert smilies or formatting code?
Exactly!! Good guess.
Ah. This is a problem. There is no standard way to get the current
location of the carat within a control in all browsers. Some browsers may
provide proprietary properties or methods to obtain this information (IE
does), but I expect most will not.
<snip>
This adds another problem. There is no intrinsic way to determine whether
a control has focus. You would have to track it yourself with focus/blur
events.
See the code I'm attaching below...
I'll mention now that writing code specific to IE is not my forte (I
despise the browser, so I spend little time with it). The code below does
essentially what you want, though.


<<snip>>

Thanks for the code. I'm pooped right now, had a really busy day. I'll try
it tomorrow or soon. I installed SP2 recently. Everything is running fine,
but it's been a while since I reinstalled everything. I think I'll do that
tomorrow for the heck of it. Anyway....

I'll post fragments of the code below which came from a reply page at
www.amdzone.com.

All the code was in the body of the HTML document. The little JS code I saw
in the head of the document didn't appear to have anything to do with this
but I could be wrong.

First, the actual function that handles this:

<script language="JavaScript" type="text/javascript">

<!--

function emoticon(text) {

var txtarea = document.post.message;

text = ' ' + text + ' ';

if (txtarea.createTextRange && txtarea.caretPos)

{

var caretPos = txtarea.caretPos;

caretPos.text =
caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text
+ ' ' : caretPos.text + text;

txtarea.focus();

}

else

{

txtarea.value += text;

txtarea.focus();

}

}

//-->

</script>

Next, the code that displays the image and calls the function when the image
is clicked:

<a href="javascript:emoticon(':D')"><img
src="./modules/PNphpBB2/images/smiles/icon_biggrin.gif" border="0" alt="Very
Happy" title="Very Happy" width="15" height="15" /></a>
Here is the code for the text area. This appears to handle the focus and
other issues you referred to above.

<textarea class="post" id="message" name="message" rows="15" cols="35"
style="width:450px;height:202px" tabindex="3" onselect="storeCaret(this);"
onclick="storeCaret(this);" onkeyup="storeCaret(this);"></textarea>
The error I get occurs when I click an image and the function is called. It
appears the very first line in the function causes the problem. If I
understand this line correctly, it's try to pull all the text out of the
text area and store the text in a variable. However, the error message I
got (don't recall the exact wording) seemed to indicated it couldn't find
the object (the textarea) to pull the text from or the object doesn't exist.

Again, I'll give your code a shot. However, you sound like you aren't
confident it will do what I'll need it to do. Any idea why this code isn't
working in my webpage?

Thanks again!!

Chris Smith
Jul 23 '05 #8
On Tue, 10 Aug 2004 22:38:31 -0400, who be dat? <wh******@dot.com> wrote:

[snip]

Just so you know (I say this to everyone)...
<script language="JavaScript" type="text/javascript">
The language attribute has been deprecated for years and shouldn't be
used. Moreover, the type attribute makes the language attribute redundant.
<!--
The practice of script hiding is now obsolete. Even browsers that can't
execute scripts still understand what a SCRIPT element is.

[snipped script]
//-->
That goes, too.
</script>

Next, the code that displays the image and calls the function whenthe
image is clicked:

<a href="javascript:emoticon(':D')"><img
src="./modules/PNphpBB2/images/smiles/icon_biggrin.gif" border="0"
alt="Very Happy" title="Very Happy" width="15" height="15" /></a>
It would be better to write that as

<img ... onclick="emoticon(':D')">

Now all that's out of the way...
<textarea class="post" id="message" name="message" rows="15"cols="35"
style="width:450px;height:202px" tabindex="3"
onselect="storeCaret(this);" onclick="storeCaret(this);"
onkeyup="storeCaret(this);"></textarea>
Without seeing the storeCaret() function, I can't tell what
txtarea.caretPos refers to in the script you posted.
The error I get occurs when I click an image and the function iscalled.
It appears the very first line in the function causes theproblem. If I
understand this line correctly, it's try to pull allthe text out of the
text area and store the text in a variable.However, the error message I
got (don't recall the exact wording)seemed to indicated it couldn't find
the object (the textarea) topull the text from or the object doesn't
exist.
The line,

var txtarea = document.post.message;

attempts to get a reference to the element named/id'd message in the form
named/id'd post. From that, you can access the various properties of the
element, including the value property. If this line fails, it implies that
either there is no form named post, or no control named message.
Again, I'll give your code a shot. However, you sound like youaren't
confident it will do what I'll need it to do. [...]


As I said, I'm not familiar with the peculiarities of IE (nor do I really
want to be). It'll do what you want, but there might be a better way.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail
Jul 23 '05 #9
JRS: In article <opscm0hd06x13kvk@atlantis>, dated Thu, 12 Aug 2004
20:55:44, seen in news:comp.lang.javascript, Michael Winter <M.Winter@bl
ueyonder.co.invalid> posted :
<!--


The practice of script hiding is now obsolete. Even browsers that can't
execute scripts still understand what a SCRIPT element is.


You are there assuming that browsers are the only type of software that
reads Web page files. There exists at least one publicly-available
program which processes HTML files but does not know that SCRIPT can
bracket non-HTML. I use it several times a day.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms & links.
PAS EXE TXT ZIP via <URL:http://www.merlyn.demon.co.uk/programs/00index.htm>.
Do not Mail News to me. Before a reply, quote with ">" or "> " (SoRFC1036)
Jul 23 '05 #10
On Fri, 13 Aug 2004 11:54:06 +0100, Dr John Stockton
<sp**@merlyn.demon.co.uk> wrote:
JRS: In article <opscm0hd06x13kvk@atlantis>, dated Thu, 12 Aug2004
20:55:44, seen in news:comp.lang.javascript, Michael Winter
<M.******@blueyonder.co.invalid> posted :
The practice of script hiding is now obsolete. Even browsers thatcan't
execute scripts still understand what a SCRIPT element is.


You are there assuming that browsers are the only type of softwarethat
reads Web page files. There exists at least one publicly-
available program which processes HTML files but does not know that
SCRIPT can bracket non-HTML. I use it several times a day.


To which program do you refer? I can think of one, possibly two, HTML
parsers that don't treat scripts properly: Google and the W3C Mark-up
Validator. However, it doesn't really matter if either of these are
affected by scripts. Does it matter with your program?

Perhaps I should add to the paragraph you quoted above:

"If you feel that it is important to hide the script, move it into
an external file. That way, only user agents that are interested in
the type of script you indicate will bother to download and execute
it."

Would that be preferable, or do you feel that script hiding should
continue through the traditional methods?

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail
Jul 23 '05 #11
Dr John Stockton <sp**@merlyn.demon.co.uk> writes:
JRS: In article <opscm0hd06x13kvk@atlantis>, dated Thu, 12 Aug 2004
20:55:44, seen in news:comp.lang.javascript, Michael Winter <M.Winter@bl
ueyonder.co.invalid> posted :

The practice of script hiding is now obsolete. Even browsers that can't
execute scripts still understand what a SCRIPT element is.


You are there assuming that browsers are the only type of software that
reads Web page files. There exists at least one publicly-available
program which processes HTML files but does not know that SCRIPT can
bracket non-HTML. I use it several times a day.


If you decide to use a program that doesn't understand the version of
HTML that you write, then ofcoruse you need to be aware what you have
to do to mollify it. The existence of such programs is not a reason to
recommend the use of "hiding" scripts using "<!--" (or even to argue
against discouraging it, but that's more subjective, since arguably,
all "hiding" does is to add a few bytes).
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #12
JRS: In article <opscp1aqqrx13kvk@atlantis>, dated Sat, 14 Aug 2004
12:06:15, seen in news:comp.lang.javascript, Michael Winter <M.Winter@bl
ueyonder.co.invalid> posted :
On Fri, 13 Aug 2004 11:54:06 +0100, Dr John Stockton
<sp**@merlyn.demon.co.uk> wrote:
JRS: In article <opscm0hd06x13kvk@atlantis>, dated Thu, 12 Aug2004
20:55:44, seen in news:comp.lang.javascript, Michael Winter
<M.******@blueyonder.co.invalid> posted :
The practice of script hiding is now obsolete. Even browsers thatcan't
execute scripts still understand what a SCRIPT element is.
You are there assuming that browsers are the only type of softwarethat
reads Web page files. There exists at least one publicly-
available program which processes HTML files but does not know that
SCRIPT can bracket non-HTML. I use it several times a day.


To which program do you refer?


CHEKLINX, available via the sig of this and my previous article.
I can think of one, possibly two, HTML
parsers that don't treat scripts properly: Google and the W3C Mark-up
Validator. However, it doesn't really matter if either of these are
affected by scripts. Does it matter with your program?
Yes, it can generate false reports in the presence of some legal
javascript and VBscript constructions, and that is a distraction.
AFAIR, to avoid this it is only necessary to use '' instead of ' for VB
comment, and in javascript to use a < b instead of a<b (where b is one
of a few letters).

CHEKLINX was written for a 33MHz 486 with slow discs; not wanting to
risk it being slow, I programmed it to read the input - which typically
is all the HTML of the master of my Web site - in a fast and pragmatical
manner. Teaching it <script> .. </script> seems non-urgent.

If you keep the master of any sites on a PC, why not try it? For a
small site, a 33kB ZIP, getting a 16-bit program; for larger, get the
55kB 32-bit EXE from the directory below. E&OE.

Perhaps I should add to the paragraph you quoted above:

"If you feel that it is important to hide the script, move it into
an external file. That way, only user agents that are interested in
the type of script you indicate will bother to download and execute
it."
That's different, really. The construction <!-- .. // --> is to hide
the script from software that understands HTML comment but not the
SCRIPT tag, while still leaving it on the page. Moving it into an
external file also hides it from that class of user that can use View
Source but nothing more (and the number of requests here for hiding View
Source shows that it is not a small class).

Would that be preferable, or do you feel that script hiding should
continue through the traditional methods?


That is up to the scripter; I merely wished to demonstrate that "Even
browsers that can't execute scripts still understand what a SCRIPT
element is." is not a sufficient condition to enable an assertion that
the script hiding can without any possible harm be removed.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms & links.
PAS EXE TXT ZIP via <URL:http://www.merlyn.demon.co.uk/programs/00index.htm>.
Do not Mail News to me. Before a reply, quote with ">" or "> " (SoRFC1036)
Jul 23 '05 #13

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

10 posts views Thread by Chris Coho, Jr. | last post: by
6 posts views Thread by Patrick | last post: by
1 post views Thread by kimmie | last post: by
4 posts views Thread by Andre Nogueira | last post: by
7 posts views Thread by RobKinney1 | last post: by
5 posts views Thread by wxnut | last post: by
3 posts views Thread by =?Utf-8?B?SmVycnk=?= | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.