473,856 Members | 1,593 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

TextArea prototype and event listeners

Is there any way in Mozilla/Firefox to add an event listener to all
textarea elements? Something along the lines of
HTMLTextAreaEle ment.prototype. onkeydown = function() {alert('mom');}
only it should work, too.

Or is my only solution to loop through each one and use
..addEventListe ner? And then trap for any DOM modifiactions in case new
ones are created.

Thanks,
Csaba Gabor from Vienna

Apr 8 '06 #1
8 5567
VK

Csaba Gabor wrote:
Is there any way in Mozilla/Firefox to add an event listener to all
textarea elements?
Yes, now it is possible for Gesko browsers too, because they support
behaviors:

<html>
<head>
<title>Behavior </title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
font: 1em Verdana, sans-serif;
color: #000000;
background-color: #FFFFFF}
form fieldset textarea {
-moz-binding: url(behavior.xm l#KeyListener);
/* behavior: url() counterpair for IE left for you */
font: 1em monotype;
}
</style>
</head>

<body<form action=""
<fieldset><leg end>Demo</legend
<textarea name="ta001" cols="50" rows="5"></textarea><br
<textarea name="ta002" cols="50" rows="5"></textarea
</fieldset
</form
</body>

</html>
// behavior.xml

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="KeyListener ">
<handlers type="text/javascript">
<handler event="keypress " attachto="eleme nt">
window.alert(ev ent.which);
</handler>
</handlers>
</binding>
</bindings>

Apr 8 '06 #2
VK

VK wrote:
-moz-binding: url(behavior.xm l#KeyListener);
/* behavior: url() counterpair for IE left for you */
said "a" say "b" :-)

Here is the full code:

// HTML

<html>
<head>
<title>Behavior </title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
font: 1em Verdana, sans-serif;
color: #000000;
background-color: #FFFFFF}
form fieldset textarea {
-moz-binding: url(behavior.xm l#KeyListener);
behavior: url(behavior.ht c);
font: 1em monotype;
}
</style>
</head>

<body<form action=""
<fieldset><leg end>Demo</legend
<textarea name="ta001" cols="50" rows="5"></textarea><br
<textarea name="ta002" cols="50" rows="5"></textarea
</fieldset
</form
</body>

</html>
// behavior.xml (for Gecko)
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="KeyListener ">
<handlers type="text/javascript">
<handler event="keypress " attachto="eleme nt">
window.alert(ev ent.which);
</handler>
</handlers>
</binding>
</bindings>
// behavior.htc (for IE)
<public:attac h event="onkeypre ss" onevent="KeyLis tener()" />
<script type="text/Jscript">
function KeyListener() {
window.alert(ev ent.keyCode);
}
</script>

As you can see Mozilla team decided to squeeze behaviors into
pseudo-XML syntax, so the difference between bindings and behaviors may
look spooky on the first look. But you can see that the difference is
really in the used "envelope". Internally it is the same conventional
scripting in both cases - lesser any worries about feature detection
and fall back, because each block is guaranteed to be called by the
intended UA.

Apr 8 '06 #3
VK wrote:
VK wrote:
-moz-binding: url(behavior.xm l#KeyListener);
/* behavior: url() counterpair for IE left for you */


said "a" say "b" :-)

Here is the full code:

// HTML

<html>
<head>
<title>Behavior </title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
font: 1em Verdana, sans-serif;
color: #000000;
background-color: #FFFFFF}
form fieldset textarea {
-moz-binding: url(behavior.xm l#KeyListener);
behavior: url(behavior.ht c);
font: 1em monotype;
}
</style>
</head>

<body
><form action=""
><fieldset><leg end>Demo</legend
><textarea name="ta001" cols="50" rows="5"></textarea><br
><textarea name="ta002" cols="50" rows="5"></textarea
></fieldset
></form
</body>

</html>
// behavior.xml (for Gecko)
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="KeyListener ">
<handlers type="text/javascript">
<handler event="keypress " attachto="eleme nt">
window.alert(ev ent.which);
</handler>
</handlers>
</binding>
</bindings>
// behavior.htc (for IE)
<public:attac h event="onkeypre ss" onevent="KeyLis tener()" />
<script type="text/Jscript">
function KeyListener() {
window.alert(ev ent.keyCode);
}
</script>

As you can see Mozilla team decided to squeeze behaviors into
pseudo-XML syntax, so the difference between bindings and behaviors may
look spooky on the first look. But you can see that the difference is
really in the used "envelope". Internally it is the same conventional
scripting in both cases - lesser any worries about feature detection
and fall back, because each block is guaranteed to be called by the
intended UA.


This is fabulous VK, thanks for a very clear, working example.

I have just one issue with it, which is the same thing that bugs me
about IE's approach with the .htc files. I HATE extra files and extra
hits to the server. My immediate goal is to make this work with a
GreaseMonkey script, so it would be VERY useful to have everything in
one file. Unfortunately, I haven't been able to figure out how to make
your example work this way. The problem point is, I think, that '#' in
the url, which just smacks of poor spec design.

Here's what I thought to do: whether I use the CSS version or
document.addBin ding(...), a url needs to be specified. So, I thought
to use data: protocol. If I take all the newlines and extra spaces out
of your behavior.xml file and put
data:text/xml,file_conten t_goes_here_wit hout_trailing_h ash_part
into Firefox's location bar, then Firefox is happy with that. However,
this does not fly when I try to insert it into the style sheet.
Indeed, why should it? - the parser goes along reading characters
thinking it's got xml data and then *pow* it hits that invalid #
character. Somehow, it should know that it's got to the end of the
data section. Encoding the # as %23 did not help (nor did putting an
end of file, %19, before it). Same thing goes for trying it as
data:text/html

Evidently in version 2 of xbl, the # will not be required. See
http://www.mozilla.org/projects/xbl/...nterpretation1
vs. version 1 at:
http://www.mozilla.org/projects/xbl/xbl.html#attach-css

Can you think of any other approaches for a one file solution till
then?

Csaba

Apr 8 '06 #4
VK

Csaba Gabor wrote:
I have just one issue with it, which is the same thing that bugs me
about IE's approach with the .htc files. I HATE extra files and extra
hits to the server. My immediate goal is to make this work with a
GreaseMonkey script, so it would be VERY useful to have everything in
one file. Unfortunately, I haven't been able to figure out how to make
your example work this way.


Sorry, I should mention it myself. The hash (#) usage in Gecko bindings
is rather "creative": it doesn't point to (and has no relation to) a
HTML anchor. It points to an id'entified block in the binding file.
This way you can have as many blocks as you want:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="KeyListener ">
<handlers type="text/javascript">
<handler event="keypress " attachto="eleme nt">
window.alert(ev ent.which);
</handler>
</handlers>
</binding>
<binding id="Welcomer">
<handlers type="text/javascript">
<handler event="keypress " attachto="eleme nt">
window.alert('W elcome to Gecko bindings!');
</handler>
</handlers>
</binding>
</bindings>

.... and in your style declarations then:
-moz-binding: url(behavior.xm l#KeyListener);
or
-moz-binding: url(behavior.xm l#Welcomer);
or both

Overall you may think of any block (KeyListener, Welcomer etc) as an
object constructor. So nothing prevent you to add any amount of needed
code in any clock.

Also it seems to be the old evangelism question of what is better: an
all-in-one file or small reusable chunks one can combine in the needed
way client-side. Actually both behavior models are made holding the
latter for the true. But if you like all-in-one better, then here is
the way.

Apr 8 '06 #5
VK

VK wrote:
Sorry, I should mention it myself. The hash (#) usage in Gecko bindings
is rather "creative": it doesn't point to (and has no relation to) a
HTML anchor. It points to an id'entified block in the binding file.
This way you can have as many blocks as you want:


Yet another clarification :-)

Behaviors (aka bindings) are not a kind of WebService or something like
that. I mean if you declare -moz-binding:
url(behavior.xm l#KeyListener), it does not mean that the server returns
only KeyListener block. The entire behavior.xml file will be read and
cached in the regular way (unless specially prevented), so next call to
this file will go to the cache, not to the server.

Apr 8 '06 #6
VK

Csaba Gabor wrote:
Evidently in version 2 of xbl, the # will not be required. See
http://www.mozilla.org/projects/xbl/...nterpretation1
vs. version 1 at:
http://www.mozilla.org/projects/xbl/xbl.html#attach-css

Can you think of any other approaches for a one file solution till
then?


Sorry, ignore my two follow-up posts then. I admit I did not get your
question right. I also admit I never used the monkey, so the internal
purpose and mechanics of what you are doing is not totally clear to me.
I guess it is about redefining automatically any loaded page, something
like magicFunction in Opera?

Any way, the task is to place the entire binding's code in url(data)? I
never thought about such twist, but must be some way I guess, just give
me some time :-)

P.S. And yes, I am not happy neither with the hash misuse in XBL 1.0,
you may conclude it from my previous post. To use # in such way -
thusly treat an XML element with id as an anchor - it is too much of
creativity for my taste. I'm glad to hear that Mozilla seems realized
this too.

Apr 8 '06 #7
VK wrote:
Csaba Gabor wrote:
Evidently in version 2 of xbl, the # will not be required. See
http://www.mozilla.org/projects/xbl/...nterpretation1
vs. version 1 at:
http://www.mozilla.org/projects/xbl/xbl.html#attach-css

Can you think of any other approaches for a one file solution till
then?
Sorry, ignore my two follow-up posts then. I admit I did not get your
question right. I also admit I never used the monkey, so the internal
purpose and mechanics of what you are doing is not totally clear to me.
I guess it is about redefining automatically any loaded page, something
like magicFunction in Opera?


GreaseMonkey (GM) allows one to inject arbitrary javascript code into
every (including i/frames) page (that meets certain user specified
criteria) that FF loads. This allows one to customize pages because
this javascript can rewrite the DOM, adding or removing elements, or
simply altering them.

In my case, I wish to alter the behaviour of every single textarea that
I encounter. Each GM script lives in a single file in a special FF
directory. More than one file is really quite awkward. So it makes
sense to get everything into one file. As far as having the behaviour
definition in one long data url, I can always encode a nicer looking
string and stuff it in.
Any way, the task is to place the entire binding's code in url(data)? I
never thought about such twist, but must be some way I guess, just give
me some time :-)


So if you can figure out a way to get around that ugly #, my hat is off
to you.

Csaba

Apr 9 '06 #8
VK

Csaba Gabor wrote:
So if you can figure out a way to get around that ugly #, my hat is off
to you.


I guess you can keep your hat on. :-( :-)

Here is the deal: XBL URI is not just a source file one could replace
by url(data). It is a pointer to a specific place in a specific file
pointed by that URI. url(data) simply doesn't have this part of URI
mechanics implemented, so no way.

Unfortunately in your particular case (GreeseMonkey) you have to stick
to the ancient way:
var ta = document.getEle mentsByTagName( 'TEXTAREA');
for (blah) {blah-blah}

I do not consider this as a default of XBL: it is not a requirement for
a technology to be implementable over url(data) - though could be nice
maybe.

Apr 9 '06 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
2348
by: Amir Hardon | last post by:
I am dynamically adding rows to a table, and each row have a button which removes it. I have successfully implemented this for mozilla but I'm having troubles with IE, here is how I did it: Each new row's id is an index number, each button's name is the row's id, and I'm adding this function as the click event listener for the button: function removeline(event){ var row=document.getElementById("row" + event.target.name);
6
8099
by: lkrubner | last post by:
I'm offering users the ability to type weblog posts into a form and post them. They type the text into a TEXTAREA which is on a form. The form, when submitted, hits a PHP script. Before it is submitted, while they are typing, I'm trying to offer them some common word processing functions. I want to implement unlimited undo and redo for the textarea. I've set the textarea to onChange="addToArrayOfPastWork()"; My undo button gives me...
0
2079
by: Kamilche | last post by:
''' event.py An event manager using publish/subscribe, and weakrefs. Any function can publish any event without registering it first, and any object can register interest in any event, even if it doesn't exist yet. The event manager uses weakrefs, so lists of listeners won't stop them
1
3466
by: Marek Murin | last post by:
Hi all, I have created vb.net user control that has to be used by vb6 form. Everything goes well with putting the vb.net user control on the VB6 form until I want to receive any event from my control. The event handler is displayed on VB6 IDE combo and you can create a sub for it as usual, but when I run the vb6 form to test it, it won't work. I have spent too much time til now with that without finding solution. Can anybody help me ?
0
5020
by: Eniac | last post by:
Hello, I've started using Enterprise Library 2.0 recently and I've encountered a problem that seems to be ... well... undocumented :) Basically, when I set a Trace Listener (formatted event log to be precise), if i specify the name of a custom event log, the listener won't log in it. I've checked in the registry, the log is there. In the event viewer, I
4
2098
by: reggiestyles | last post by:
Hi, I've got a question about prototype and event handling. I've got several div's (dynamic number) on a page that I want to set as active or inactive (basically, I'm using scriptaculous' Effects to set Opacity to 1 for the active div and 0.5 for the inactive ones). Using prototype's event handling, I can see two ways to get this done:
2
1998
by: meyousikmann | last post by:
This will be difficult to explain so bear with me. If anyone is familiar with Tibco Rendezvous and/or Microsoft Messaging, this may make more sense. I've created a hierarchy of objects that looks something like this: Tibco-->Transports-->Transport Where Tibco is the overall component that owns a collection of Transports and each Transport is an object of a class.
56
3047
by: ashore | last post by:
Guys, I see a fair bit of negativity around re subject package. Can someone share your views, either way? Thanks, AS
0
9916
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9762
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11057
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10696
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9531
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7932
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
1
4575
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4174
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3201
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.