Using Javascript, how do I give focus to a form text box on page load without using the <body> tag?
Thanks!
Thanks!
-
-
Heya, tomcadman. Welcome to TSDN!
You can call the element's focus() method anytime after you define it in the script.
E.g., this works:
[code=html]
<input id="theInput" type="text" value="" />
<script type="text/javascript">
document.getEle mentById('theIn put').focus();
</script>
[/code]
But this won't:
[code=html]
<script type="text/javascript">
document.getEle mentById('theIn put').focus();
</script>
<input id="theInput" type="text" value="" />
[/code] -
make a function
call it oneventCode:onload
orCode:document.getElementById(text_field_name).focus()
shoonyaCode:document.form_name.text_field_name.focus()
Comment
-
The plot thickens... what is the chance I an use such code on page that is dynamically generated?
Details: Client hired an e-cart, wants changes. But limited access to code- i.e. via code templates. I can code one header for all pages, one footer, one body tag, etc. and I change the in-between code for specific pages.
The page content in question is dynamically repeated for the number of products the client has to list (i.e. I make one block of code to present all products).
See next page after this link http://www.king-cart.com/TVtest/frontpage=yes by pressing "Federal Standard Colors Products" button. Then view source.
The specific text box (labled 'COLOR-CODE') to be refocused with every load is in the 4th product down the list and it too is dynamically generated. I know its name from doing a 'view source' on the generated page- i.e "option|Col or-Code|4".
Q: How can I focus on this text box? Possible?
Thanks for any suggestions!
-TomcadmanComment
-
Heya, Tomcadman.
It sounds like the easiest solution will be to hand-code the focus() call into each page. Not all pages are going to have a form, and the element you want to have focused is likely to change depending on the page.Comment
-
If you view source at page after link as ref'd above, you can see where I attempted to do this but no go. (ref. lines 371 and 381).
371 is where text box is generated. 381 is where I put code to focus.
What am I missing?
Ever-learning,
-tomcadmanComment
-
Heya, Tomcadman.
Alrightey. Now that I've actually looked at the source code (:P), here's some goodies:- Unrelated, but in your scripts1.js file, you have <script> tags, which are unnecessary (and in fact generate errors) in .js files.
- You have no element whose id is 'option|Color-Code|4'. You have one element whose name is 'option|Color-Code|4', but that's not the same thing. You'd need to specifically set the element's ID. If you absolutely have no choice and must use name instead of ID, try calling this instead:
[code=javascript]
document.getEle mentsByName('op tion|Color-Code|4')[0].focus();
[/code]- Your code is attempting to call the 'option|Color-Code|4' focuser once for every product on the page. This is bad because there are situations where there is no element with ID/name 'option|Color-Code|4' when some of those statements are executed, and in some browsers, this means that your JavaScript will stop getting executed.
Ok, so it's a template; this is understandable. If it's possible to put this code somewhere else in your content so that it goes only on that page, but doesn't end up in the product listings, this would be preferable. Otherwise, you'll need to change your code slightly to only call focus() if the element exists:
[code=javascript]
if((! elementFocused) && (elementFocused = document.getEle mentById('optio n|Color-Code|4')))
elementFocused. focus();
// Or...
if((! elementFocused) && (elementFocused = document.getEle mentsByName('op tion|Color-Code|4')) && (elementFocused = elementFocused[0]))
elementFocused. focus();
[/code]
This code will check for a global variable named elementFocused. If it is unset, then the the script will attempt to find the element whose ID (or name, depending on which set you use) is 'option|Color-Code|4'.
If the element doesn't exist, elementFocused will be set to null, which evaluates to false, so we won't try to focus the element. And the next time we reach this set of statements, elementFocused will still be null (false), so we'll try to focus the element again.
If the element exists, we'll focus it, and then the next time we try to focus the element, elementFocused will be a reference to an element, which evaluates to true, so we'll skip trying to focus the element (since it's already been focused).
Note that in the second set, we have to additionally make sure that there are any elements named 'option|Color-Code|4' before we try to get the 0th one.Comment
-
I tried using the simpler code (figuring I will add the 'if exists' code after I get simple to work.)
Text box only gets focus once (on page load.)Code:<script type="text/javascript"> document.getElementsByName('option|Color-Code|4')[0].focus(); </script>
Apparently, the cart's response (when "Add to Cart" is pressed) is not enough to trigger the focus again. I have to 'View Cart' or another page. Then when I return to products, the text box gets focus again.
Also, doesn't matter where I place it- i.e. in footer or inline on page.
So how do I create a trigger to focus on this text on page refresh (or whatever is happening after cart's code responds.)?
Any suggestions would be appreciated,
Thanks!
-tomcadmanComment
-
Checking back in on this...
Anybody have a suggestion for above code challenge?
Thanks!
-tomcadmanComment
-
Well, it will only occur when you tell it to. JavaScript is an event-driven language and can only respond to events, or be called when manually invoked. If you want it to focus, you have to tell it to focus. That's as simple as it gets.
If it won't focus, you're calling it incorrectly.Comment
Comment