'this' and <A HREF="...">
Peter Laman
hyperlink's action must be to focus a field in a <form>. I created the
following function to create such a link (the argument is a field
object, e.g. <input>):
function createFieldAnchor(field, linkText)
{
var anchor = document.createElement("a");
anchor.field = field;
anchor.href='javascript:this.focusField()';
anchor.innerHTML = linkText;
anchor.focusField = function()
{
var f = this.field;
f.focus();
f.select();
}
return anchor;
}
The link does not work. Debugging shows that the problem is in
'javascript:this.focusField()'. The 'this' operator does not refer to
the anchor here (as I expected), but to the window object!
Is there a simple way to get a reference to the anchor in that
context?
I thought up the following 'tricky' solution, which works, but it's
not a very elegant solution:
//General function to implement auto-increments on an object.
function genAutoInc(obj)
{
if (obj.autoIncSeed == null) {
obj.autoIncSeed = 0;
}
obj.autoIncSeed++;
return obj.autoIncSeed;
}
//This version assigns a unique ID to the anchor and uses that to
refer to it in the HREF.
function createFieldAnchor2(field, linkText)
{
var anchor = document.createElement("a");
anchor.field = field;
anchor.id = 'dynamicId'+genAutoInc(field.ownerDocument);
anchor.href='javascript:document.getElementById("'+anchor.id
+'").focusField()';
anchor.innerHTML = linkText;
anchor.focusField = function()
{
var f = this.field;
f.focus();
f.select();
}
return anchor;
}
Erwin Moller
Hi,
I think you can avoid this whole mess by NOT using the javascript
pseudocode in your hyperlinks.
I think that is the reason your 'this' is the windowsobject.
Try this:
1) remove the anchortags completely
2) replace them by a span tag. (If you miss your hyperlinkcursor, use
the cursor CSS solution, eg style="cursor:crosshair")
3) Give the span an onClick eventhandler.
4) add onClick() to the span and call some function with the right
parameters, eg onClick="focusMe('field1');"
function focusMe(fieldName){
document.forms["yourformnamehere"][fieldName].focus();
}
Could that help?
Regards,
Erwin Moller
"Álvaro G. Vicario"
> In my app I need to dynamically generate a series hyperlinks. Each
> hyperlink's action must be to focus a field in a <form>. I created the
> following function to create such a link (the argument is a field
> object, e.g. <input>):
Just a crazy idea, being ignorant of your actual needs... Have you
considered using HTML labels? They produce the same effect you describe:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
input:focus{
background-color: yellow;
}
label{
border-bottom: 1px dotted black;
}
--></style>
</head>
<body>
<form action="" method="get" onsubmit="return false">
<p>
<label for="i1">Go to no. 1</label>
<label for="i2">Go to no. 2</label>
<label for="i3">Go to no. 3</label>
<label for="i4">Go to no. 4</label>
<label for="i5">Go to no. 5</label>
<label for="i6">Go to no. 6</label>
<label for="i7">Go to no. 7</label>
<label for="i8">Go to no. 8</label>
<label for="i9">Go to no. 9</label>
</p>
<p><input id="i1"></p>
<p><input id="i2"></p>
<p><input id="i3"></p>
<p><input id="i4"></p>
<p><input id="i5"></p>
<p><input id="i6"></p>
<p><input id="i7"></p>
<p><input id="i8"></p>
<p><input id="i9"></p>
</form>
</body>
</html>
(CSS is only for visual reference: it works in Firefox, Opera... and
probably not in IE)
--
-- http://alvaro.es - Álvaro G. Vicario - Burgos, Spain
-- Mi sitio sobre programación web: http://bits.demogracia.com
-- Mi web de humor al baño María: http://www.demogracia.com
--
Thomas 'PointedEars' Lahn
> In my app I need to dynamically generate a series hyperlinks. Each
> hyperlink's action must be to focus a field in a <form>. I created the
> following function to create such a link (the argument is a field
> object, e.g. <input>):
>
> function createFieldAnchor(field, linkText)
> {
> var anchor = document.createElement("a");
> anchor.field = field;
> anchor.href='javascript:this.focusField()';
> anchor.innerHTML = linkText;
> anchor.focusField = function()
> {
> var f = this.field;
> f.focus();
> f.select();
> }
> return anchor;
> }
>
> The link does not work. Debugging shows that the problem is in
> 'javascript:this.focusField()'.
http://jibbering.com/faq/#FAQ4_24
> The 'this' operator
`this' is _not_ an operator.
> does not refer to the anchor here (as I expected), but to the window object!
this, literally, is unsurprising. However, it does not necessarily refer to
the object referred to by the host-defined `window' property of the Global
Object, but rather to the Global Object itself.
> Is there a simple way to get a reference to the anchor in that
> context?
Yes, there is:
<a href="alternative" onclick="... this ... ">...</a>
However, your needs go further and your code points out a confusion between
host objects and native objects on your part. Trying to augment DOM host
objects with a property as you do is a really bad idea because of what the
ECMAScript Specification says about that and what implementations exhibit.
You really want to use a wrapper method instead:
function focusField(a)
{
// call another wrapper method for ensuring compatibility;
// see also http://PointedEars.de/scripts/dhtml.js
var f = dhtml.getElemById(a.id + "_field");
if (f)
{
// add feature tests here
f.focus();
f.select();
}
}
Since you are using a method to create your special anchor already, it would
be prudent to make the focusField() method a property of a wrapper object:
function FieldAnchor(field, linkText)
{
// the local variable keeps the value private;
// if you don't want that, use this.anchor and the like;
var anchor = dhtml.createElement("a");
this.field = field;
var me = this;
// call wrapper method for ensuring compatibility
_addEventListener(anchor, "click",
function() {
me.focusField();
});
// feature-test this before, and avoid this;
// append a text node or several other node objects instead
anchor.innerHTML = linkText;
// Allows "protected" read access to the "private" variable.
// (must be defined here and not as a prototype method)
this.getNode = function() {
return anchor;
};
}
FieldAnchor.prototype = {
constructor: FieldAnchor,
focusField: function() {
var f = this.field;
if (f)
{
// add feature tests here
f.focus();
f.select();
}
}
};
// example; add more feature tests here
var a = new FieldAnchor(dhtml.getElemById("foo"), "bar");
document.body.appendChild(a.getNode());
HTH
PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>