Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
DannyK89DannyK89 

Recaptcha Focus

I have implemented the recaptcha in my site. However I am running into an issue. The issue is not that major and I can live with it but I would like some help fixing it. My issue is that when I come to the page with the recaptcha on it the focus of the page is the response field for the recaptcha. I would like it to be the first field on the page. I followed the help on this article:

 

http://wiki.developerforce.com/page/Adding_CAPTCHA_to_Force.com_Sites

 

Is there any way to make the focus go off of the recaptcha and onto the first field?

Andy BoettcherAndy Boettcher

If you're just dealing with Javascript - placing the execution of the function to set focus on the first field after the recaptcha stuff should do it for you.

 

-Andy
DannyK89DannyK89
<script src="http://api.recaptcha.net/js/recaptcha_ajax.js" type="text/javascript" />
document.getElementById('{!$Component.First}').focus();
<script>
function showRecaptcha(element) {
  Recaptcha.create("{!publicKey}", element, {
        theme: 'red',
        tabindex: 0,
        callback: Recaptcha.focus_response_field
        
  });
  document.getElementById('{!$Component.First}').focus();
}
</script>
<!--  display the challenge form in this output panel -->
<apex:pageBlockSectionItem >
    <apex:outputPanel id="captcha" > 
            <apex:inputhidden value="{!challenge}" id="challenge" />
            <apex:inputhidden value="{!response}" id="response" />
            <script type="text/javascript">
            function captureResponse(ele) { 
                document.getElementById('{!$Component.challenge}').value = 
                    document.getElementById('recaptcha_challenge_field').value;
                
                document.getElementById('{!$Component.response}').value = 
                    document.getElementById('recaptcha_response_field').value;
                    document.getElementById('{!$Component.First}').focus();
            }
            </script>
            <div id="dynamic_recaptcha_1"></div>
            <br />
 
            


        <!--  display the image using the reCAPTCHA AJAX API -->
        <script type="text/javascript">showRecaptcha('dynamic_recaptcha_1'); document.getElementById('{!$Component.First}').focus();</script>
    </apex:outputPanel>
</apex:pageBlockSectionItem>

 I have tried putting the forcus in the javascript, but nothing seems to work. I have posted the java script for the recaptcha and the places that I put the focus method. If you need more expanation please let me know.