 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
jcoronat
Joined: 29 Dec 2004
Posts: 4
|
 Posted: Wed Dec 29, 2004 11:36 pm How to highlight initial text in an entry field? |
 |
|
|
Say, does anybody know how to have the initial-value text in a text-entry form field be highlighted?
James. |
|
kanenas
Joined: 14 Dec 2004
Posts: 191
|
| Posted: Mon Jan 03, 2005 11:07 pm use scripting to select/focus a text entry field |
|
|
|
By "highlighted", do you mean select the text or give focus to the text entry field? In either case, I believe you need to use client-side scripting. Nothing I've seen in the HTML spec or XHTML DTD suggests a way of doing either with just HTML.
| Code: |
<form>
<input type='text' id='entry' value='foo' />
</form>
<script type="text/javascript"><!--
//assume document.getElementById is implemented earlier using
//Javascript if the DOM doesn't provide a native one one
if (entry=document.getElementById('entry')) {
entry.select(); //or entry.focus();
}
//--></script>
|
|
|
jcoronat
Joined: 29 Dec 2004
Posts: 4
|
| Posted: Mon Jan 03, 2005 11:32 pm |
|
|
|
Thanks for replying. I had meant 'selected', but I see you provided both options. I don't understand where I get the 'document.getElementById' function. But I pasted what you gave me into a blank html page template and it worked! —actually, it works in MacOS/Safari, but not in Internet Explorer. Is there a way to make it work in IE, too?
Thanks again,
James. |
|
kanenas
Joined: 14 Dec 2004
Posts: 191
|
| Posted: Wed Jan 05, 2005 2:25 am |
|
|
|
document.getElementById is part of the W3C DOM, level 2 standard. It should exist in IE 5.5+ (as well as Mozilla*, NS6+, Opera4+; IE for Mac is another story), but a bit of cross browser scripting should implement it in browsers that don't support DOM level 2. Here's something I've used (but you should still test):
| Code: |
if (! document.getElementById) {
if (document.all) {
document.getElementById = function (id) {
return document.all[id];
}
} else if (document.layers) {
function getLayerById(doc, id) {
if (doc.layers[id]) {
return doc.layers[id];
} else if (doc.forms[id]) {
return doc.forms[id]
} else if (doc.images[id]) {
return doc.images[id]
} else if (doc.applets[id]) {
return doc.applets[id]
} else if (doc.anchors[id]) {
return doc.anchors[id]
} else if (doc.links[id]) {
return doc.links[id]
} else if (doc.embeds[id]) {
return doc.embeds[id]
}
var el;
for (i=0; i<doc.layers.length; ++i) {
if (doc.layers[i].id && id == doc.layers[i].id) {
return doc.layers[i];
}
el = getLayerById(doc.layers[i].document);
if (el) return el;
}
return undefined;
}
document.getElementById = function (id) {
return getElementById(this, id);
}
} else {
/*
NS, IE or OP < 4, or other non-DOM1. Are there any such which
also support javascript?
what exactly should happen here?
*/
document.getElementById = function (id) {
if (document.forms) {
if (document.forms[id]) {
return document.forms[id]
} else if (document.images[id]) {
return document.images[id]
} else if (document.applets[id]) {
return document.applets[id]
} else if (document.anchors[id]) {
return document.anchors[id]
} else if (document.links[id]) {
return document.links[id]
} else if (document.embeds[id]) {
return document.embeds[id]
}
}
return document[id];
}
}
}
|
I recommend linking to a more complete cross browser library rather than merely plopping the above inbetween some script tags. As I've only ever used custom ones, I have no libraries to recommend, but a Google search should serve. |
|
jcoronat
Joined: 29 Dec 2004
Posts: 4
|
| Posted: Wed Jan 05, 2005 10:29 am |
|
|
|
Thank you for the new piece of code. I might not actually need it, though, because as it turns out, the first code you gave me works in IE/Windows, which was what I really wanted it for.
For some reason, I had tested it in IE/MacOS, thinking that IE/Windows would behave the same (wouldn't that be nice…sometimes?) But a quick test in VirtualPC shows that it works fine in Windows.
I really appreciate the fix. Thanks for all your time and patience.
My best to you,
James. |
|
kanenas
Joined: 14 Dec 2004
Posts: 191
|
| Posted: Fri Jan 07, 2005 3:14 am |
|
|
|
I recommend at least including:
| Code: |
if (! document.getElementById && document.all) {
document.getElementById = function(id) {
return document.all[id];
}
}
|
in some script section of the webpage for those IE5 Mac and IE 4 users. I don't know how many NS4 users still exist and whether they need to be considered. |
|
jcoronat
Joined: 29 Dec 2004
Posts: 4
|
| Posted: Fri Jan 07, 2005 11:07 pm |
|
|
|
I think I'm still trying to get this to work in my pages, which are built on templates that have <script language="JavaScript1.2"> at the top. When I put the id="entry" (I use double quotes, since that's how all the tags are written in this template) into my <form> definitions, and change the
entry=document.getElementById("entry"))
to use double quotes in the argument, and put the whole
<script type="text/javascript"><!--
//assume document.getElementById is implemented earlier using
//Javascript if the DOM doesn't provide a native one one
if (entry=document.getElementById('entry')) {
  entry.select(); //or entry.focus();
}
//--></script>
right below the <form> definition in the body of the document, I can see it select the initial text in the field, but only *momentarily* as the page loads. Then it disappears, and you're left with the unselected text and the cursor to the left of the text. Do you have any idea what's going on here?
Regards,
James. |
|
kanenas
Joined: 14 Dec 2004
Posts: 191
|
| Posted: Mon Jan 10, 2005 4:36 pm |
|
|
|
| jcoronat wrote: |
| [...] templates that have <script language="JavaScript1.2"> at the top [...] |
By 'at the top', do you mean before the '<html>' tag? The 'language' attribute is obsolete, and you probably don't want scripts to run as JS 1.2; some odd behavior may be the result of this (probably not the unselection of the text entry, however). Replace the 'language' attribute with 'type="text/javascript"'.
| jcoronat wrote: |
I can see it select the initial text in the field, but only *momentarily* as the page loads. Then it disappears, and you're left with the unselected text and the cursor to the left of the text. Do you have any idea what's going on here?
Regards,
James. |
Is this new behavior, or had it always happened when the 'select()' method was called? Which browsers exhibit the behavior? |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
