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

**Andrew Thompson** · Jul 23 '05, 12:57 PM

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

On Mon, 9 Aug 2004 22:07:51 -0400, who be dat? wrote:
[color=blue]
> I'm getting a java error as a matter of fact.[/color]

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

**who be dat?** · Jul 23 '05, 12:57 PM

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

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" <SeeMySites@www .invalid> wrote in message
news:k8whp9ttwo l5$.1h1z0afkvc0 fw.dlg@40tude.n et...[color=blue]
> On Mon, 9 Aug 2004 22:07:51 -0400, who be dat? wrote:
>[color=green]
>> I'm getting a java error as a matter of fact.[/color]
>
> 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[/color]

**Andrew Thompson** · Jul 23 '05, 12:57 PM

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

On Tue, 10 Aug 2004 07:24:17 -0400, who be dat? wrote:
[color=blue]
> 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?[/color]

(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

**Evertjan.** · Jul 23 '05, 12:57 PM

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

who be dat? wrote on 10 aug 2004 in comp.lang.javas cript:
[color=blue]
> Upon clicking a given image, characters specific to that image
> will be inserted into a textbox which is actually a text area.[/color]

easy
[color=blue]
> 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.[/color]

Impossible, for so far as I know.
[color=blue]
> 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.[/color]

Show us the URL, please.
[color=blue]
> Can't get it working though.[/color]

As expected? ;-)

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

**who be dat?** · Jul 23 '05, 12:57 PM

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

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." <exjxw.hannivoo rt@interxnl.net > wrote in message
news:Xns954194B 6E1228eejj99@19 4.109.133.29...[color=blue]
> who be dat? wrote on 10 aug 2004 in comp.lang.javas cript:
>[color=green]
>> Upon clicking a given image, characters specific to that image
>> will be inserted into a textbox which is actually a text area.[/color]
>
> easy
>[color=green]
>> 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.[/color]
>
> Impossible, for so far as I know.
>[color=green]
>> 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.[/color]
>
> Show us the URL, please.
>[color=green]
>> Can't get it working though.[/color]
>
> As expected? ;-)
>
> --
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)[/color]

**Michael Winter** · Jul 23 '05, 12:57 PM

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

On Mon, 9 Aug 2004 22:07:51 -0400, who be dat? <whatever@dot.c om> wrote:
[color=blue]
> I want a user to be able to click on a given image (there will bemore
> than one image). Upon clicking a given image, charactersspeci fic to
> that image will be inserted into a textbox which isactually a text area.[/color]

No problem there. I take it this will be used in a forum (or something
similar) to insert smilies or formatting code?
[color=blue]
> 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.[/color]

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.
[color=blue]
> 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.[/color]

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.get ElementById) {
var getRefById = function(id) {
return document.getEle mentById(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('tes t'), s = null, r = null;

if(e) {
if((s = document.select ion) && 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.lengt h) {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="insert Text(':)')">
<img src="sad.png" alt="Sad" onclick="insert Text(':(')">
</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

**who be dat?** · Jul 23 '05, 12:58 PM

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

[color=blue]
>
> No problem there. I take it this will be used in a forum (or something
> similar) to insert smilies or formatting code?[/color]

Exactly!! Good guess.
[color=blue]
> 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.
>[/color]
<snip>[color=blue]
>
> 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.[/color]

See the code I'm attaching below...
[color=blue]
> 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.[/color]

<<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="JavaS cript" type="text/javascript">



</script>

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

<a href="javascrip t:emoticon(':D' )"><img
src="./modules/PNphpBB2/images/smiles/icon_biggrin.gi f" 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:45 0px;height:202p x" tabindex="3" onselect="store Caret(this);"
onclick="storeC aret(this);" onkeyup="storeC aret(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

**Michael Winter** · Jul 23 '05, 01:01 PM

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

On Tue, 10 Aug 2004 22:38:31 -0400, who be dat? <whatever@dot.c om> wrote:

[snip]

Just so you know (I say this to everyone)...
[color=blue]
> <script language="JavaS cript" type="text/javascript">[/color]

The language attribute has been deprecated for years and shouldn't be
used. Moreover, the type attribute makes the language attribute redundant.
[color=blue]
> [/color]

That goes, too.
[color=blue]
> </script>
>
> Next, the code that displays the image and calls the function whenthe
> image is clicked:
>
> <a href="javascrip t:emoticon(':D' )"><img
> src="./modules/PNphpBB2/images/smiles/icon_biggrin.gi f" border="0"
> alt="Very Happy" title="Very Happy" width="15" height="15" /></a>[/color]

It would be better to write that as

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

Now all that's out of the way...
[color=blue]
> <textarea class="post" id="message" name="message" rows="15"cols=" 35"
> style="width:45 0px;height:202p x" tabindex="3"
> onselect="store Caret(this);" onclick="storeC aret(this);"
> onkeyup="storeC aret(this);"></textarea>[/color]

Without seeing the storeCaret() function, I can't tell what
txtarea.caretPo s refers to in the script you posted.
[color=blue]
> 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.Howeve r, 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.[/color]

The line,

var txtarea = document.post.m essage;

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.
[color=blue]
> 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. [...][/color]

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

**Dr John Stockton** · Jul 23 '05, 01:02 PM

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

JRS: In article <opscm0hd06x13k vk@atlantis>, dated Thu, 12 Aug 2004
20:55:44, seen in news:comp.lang. javascript, Michael Winter <M.Winter@bl
ueyonder.co.inv alid> posted :[color=blue]
>[color=green]
>> <!--[/color]
>
>The practice of script hiding is now obsolete. Even browsers that can't
>execute scripts still understand what a SCRIPT element is.[/color]

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.demo n.co.uk/> - FAQqish topics, acronyms & links.
PAS EXE TXT ZIP via <URL:http://www.merlyn.demo n.co.uk/programs/00index.htm>.
Do not Mail News to me. Before a reply, quote with ">" or "> " (SoRFC1036)

**Michael Winter** · Jul 23 '05, 01:03 PM

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

On Fri, 13 Aug 2004 11:54:06 +0100, Dr John Stockton
<spam@merlyn.de mon.co.uk> wrote:
[color=blue]
> JRS: In article <opscm0hd06x13k vk@atlantis>, dated Thu, 12 Aug2004
> 20:55:44, seen in news:comp.lang. javascript, Michael Winter
> <M.Winter@bluey onder.co.invali d> posted :
>[color=green]
>> The practice of script hiding is now obsolete. Even browsers thatcan't
>> execute scripts still understand what a SCRIPT element is.[/color]
>
> 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.[/color]

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

**Lasse Reichstein Nielsen** · Jul 23 '05, 01:03 PM

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

Dr John Stockton <spam@merlyn.de mon.co.uk> writes:
[color=blue]
> JRS: In article <opscm0hd06x13k vk@atlantis>, dated Thu, 12 Aug 2004
> 20:55:44, seen in news:comp.lang. javascript, Michael Winter <M.Winter@bl
> ueyonder.co.inv alid> posted :[/color]
[color=blue][color=green]
>>The practice of script hiding is now obsolete. Even browsers that can't
>>execute scripts still understand what a SCRIPT element is.[/color]
>
> 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.[/color]

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 - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

**Dr John Stockton** · Jul 23 '05, 01:03 PM

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

JRS: In article <opscp1aqqrx13k vk@atlantis>, dated Sat, 14 Aug 2004
12:06:15, seen in news:comp.lang. javascript, Michael Winter <M.Winter@bl
ueyonder.co.inv alid> posted :[color=blue]
>On Fri, 13 Aug 2004 11:54:06 +0100, Dr John Stockton
><spam@merlyn.d emon.co.uk> wrote:
>[color=green]
>> JRS: In article <opscm0hd06x13k vk@atlantis>, dated Thu, 12 Aug2004
>> 20:55:44, seen in news:comp.lang. javascript, Michael Winter
>> <M.Winter@bluey onder.co.invali d> posted :
>>[color=darkred]
>>> The practice of script hiding is now obsolete. Even browsers thatcan't
>>> execute scripts still understand what a SCRIPT element is.[/color]
>>
>> 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.[/color]
>
>To which program do you refer?[/color]

CHEKLINX, available via the sig of this and my previous article.
[color=blue]
> 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?[/color]

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.

[color=blue]
>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."[/color]

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).

[color=blue]
>Would that be preferable, or do you feel that script hiding should
>continue through the traditional methods?[/color]

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.demo n.co.uk/> - FAQqish topics, acronyms & links.
PAS EXE TXT ZIP via <URL:http://www.merlyn.demo n.co.uk/programs/00index.htm>.
Do not Mail News to me. Before a reply, quote with ">" or "> " (SoRFC1036)

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

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

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment