Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

setting the focus on a field element

Posted on 2006-04-11
11
Medium Priority
?
861 Views
Last Modified: 2008-01-09
I am using javascript window.location.hash to scroll to a position in a page where I set the anchor on page refresh.
The page is scrolling to the position correctly but the cursor does not focus on the element i have specified in the code below.

Any suggestions? Thanks in advance

              <script language="JavaScript">
              <!--
                document.forms["form"].elements["description<%=rowNum%>"].focus();
                window.location.hash="anchor";
            -->
            </script>
            <a name="anchor"></a>
0
Comment
Question by:inzaghi
  • 5
  • 4
  • 2
11 Comments
 
LVL 9

Accepted Solution

by:
smaccari earned 1050 total points
ID: 16424509
Maybe you should just do this (put the focus method after the location.hash):

<script language="JavaScript">
             <!--
              window.location.hash="anchor";  
              document.forms["form"].elements["description<%=rowNum%>"].focus();
            -->
            </script>
            <a name="anchor"></a>
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16424517
<script language="JavaScript">
             <!--
              window.location.hash="anchor";  
              document.forms["form"].elements["description<%=rowNum%>"].focus();
           
 -->
            </script>
            <a name="anchor"></a>
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16424526
Oops sorry bad post :p

I just wanted to add a select method on the field, to be sure to see the cursor inside it:

<script language="JavaScript">
             <!--
              window.location.hash="anchor";  
              document.forms["form"].elements["description<%=rowNum%>"].focus();
           document.forms["form"].elements["description<%=rowNum%>"].select();
 -->
            </script>
            <a name="anchor"></a>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:inzaghi
ID: 16424605
The focus and select do not work a intended, I dont think these can be used together with the window.location.hash
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16424658
This code works fine for me:

<form style="margin-top:1000px">

            <a name="anchor"></a>
<input type=text>
</form>
<script language="JavaScript">
             <!--
              window.location.hash="anchor";  
              document.forms[0].elements[0].focus();
              -->
</script>
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16424663
Check this:

             <script language="JavaScript">
             <!--
                window.onload=function(){document.forms["form"].elements["description<%=rowNum%>"].focus();}
                window.location.hash="anchor";
            -->
            </script>
            <a name="anchor"></a>
0
 

Author Comment

by:inzaghi
ID: 16424820
I cannot use window.onload as I am using portlets.
0
 

Author Comment

by:inzaghi
ID: 16424849
The element in question is a textarea. Does this make a difference?
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16424912
No it don't.
This works too:

<form style="margin-top:1000px">

            <a name="anchor"></a>
<textarea></textarea>
</form>
<script language="JavaScript">
             <!--
              window.location.hash="anchor";  
              document.forms[0].elements[0].focus();
              -->
</script>
0
 
LVL 63

Assisted Solution

by:Zvonko
Zvonko earned 450 total points
ID: 16425024
Portlets or no portlets, you can access that form element first AFTER the element is rendered on the page.
If you cannot use onload (I see not why), then place the original script at the end of the page, or at least after the textarea.

0
 

Author Comment

by:inzaghi
ID: 16425399
As the code is executing in a loop, I have called setTimeOut with a delay of 100ms before settign the focus and this works.

Thanks for all your help
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question