# HTML5 auto focus lost ...



## JiminSA (Dec 15, 2011)

I have a single page design on my HTML5 site (link below) where I set autofocus in the input "Your full name ..." attribute on the "Contact" form within the contact "page".
It doesn't focus on page load, but Page Refresh brings it in!
If I then navigate off the contact "page" and back on again focus disappears!?
What workaround might I use to properly set the focus and consequently keep the focus set whilst navigating the site?


----------



## ckphilli (Apr 29, 2006)

2 thoughts...

1) I believe the autofocus attribute should just be "autofocus" your source has autofocus = "".

2) You could do the below, but hopefully #1 fixes it for you.

add an id to your contact href.


```
$( "#contactlink" ).click(function() {
  $( "#name" ).focus();
});
```


----------



## colinsp (Sep 5, 2007)

Jim

Your site takes an age to load for me you need to look at your page load speed. Some of your images are quite large reducing them may help.

Your site fails validation see http://validator.w3.org/check?verbo...com/fpt/#!/eA1wLx/http://bespoke-webwork.com/

If you 'view source' in Firefox you will also see several errors shown in red not picked up by the validator.

I would seriously reconsider your single page does everything approach with lots of JS what happens if visitors have JS turned off?


----------



## JiminSA (Dec 15, 2011)

> I would seriously reconsider your single page does everything approach with lots of JS what happens if visitors have JS turned off?


Good point Colin - 2% of web users do not turn on Javascript - I'll suffer the loss ...
Thanks for the validation heads up!


----------



## JiminSA (Dec 15, 2011)

> 1) I believe the autofocus attribute should just be "autofocus" your source has autofocus = "".


Chris, the ="" is somehow inserted into the source code on your browser (not on mine though - Chrome). It is simply autofocus in the original source, I assure you.


> 2) You could do the below, but hopefully #1 fixes it for you.


I have tried this approach, cursor setting via js, div reloading to mention a few. But so far nothing except "page" refresh sets the focus.
I am currently considering making the contact render using php to see what autofocus does. Will get back to this thread on that one ...


----------



## JiminSA (Dec 15, 2011)

> I am currently considering making the contact render using php to see what autofocus does. Will get back to this thread on that one ...


Makes no difference didn't really think it would but I'm trying everything to get autofocus to work on a one page site

Ho-hum! I guess the only solution is to make the contact section a page, which renders the autofocus alright, but kinda negates the smooth flow of a one page HTML5 site:down:

... Unless the powers that be can get the autofocus to work on a one page site (i.e. remain stable during nav clicks)
which prompts me to ask you another question - How does one draw this scenario to their attention? (whoever they are)


----------



## ckphilli (Apr 29, 2006)

JiminSA said:


> Makes no difference didn't really think it would but I'm trying everything to get autofocus to work on a one page site
> 
> Ho-hum! I guess the only solution is to make the contact section a page, which renders the autofocus alright, but kinda negates the smooth flow of a one page HTML5 site:down:
> 
> ...


Jim it has to be a conflict or an order of script loading for this not to work. As always I recommend removing pieces until you can make the autofocus work.


----------



## JiminSA (Dec 15, 2011)

Tried excluding one by one to no avail - still a problem.
Guess I'll popup a modal to keep the flow smooth ...


----------



## JiminSA (Dec 15, 2011)

I'm like a dog with a bone on this one I gotta get it sorted (I wish TSG had a foot-stomping Smiley!)
I have tried to set focus with good old javascript in the nav tag for the contact page thus ...

```
[URL=#contact]Contact me[/URL]
```
 It does nothing Can anyone see why, perhaps?


----------



## ckphilli (Apr 29, 2006)

Guessing you fixed this? It focuses in chrome and firefox, haven't tried IE.


----------



## JiminSA (Dec 15, 2011)

Yes Chris I used the jQuery UI to get rid of the problem on my site but it can still be seen on this link.
Hence the resurrection ...


----------



## JiminSA (Dec 15, 2011)

Without wishing to be disloyal to TSG, but out of sheer exasperation, I posted in another forum here
My question to you Chris, is where and how would I integrate this 'solution' into my html? (in the header?, before/after the input element? or elsewhere?) in order for it to fire timeously on the input element (fname)?

Would this be correct javascript?

```
<script>
	var firstElement = pageContainer.querySelector('#fname');

	if (firstElement) { 
		firstElement.focus();
	}
	</script>
```


```

```


----------



## ckphilli (Apr 29, 2006)

First, what is this?

```
H5F.setup(document.getElementsByTagName('contact'));
```
Second, if you want to use the proposed method from stackoverflow, you could probably put it in the click event.

But why? Seems like unnecessary overhead.

If you put this in your header in a ready function I don't see why it wouldn't work.


```
$('#contact').click(function(){
        $('#fname').focus();
});
```


----------



## JiminSA (Dec 15, 2011)

> First, what is this?


That invokes HTML validation ... and if it's removed it makes no difference with the problem.


> But why? Seems like unnecessary overhead.


agreed it does, but in any case neither that 'Solution' from the other forum, nor your suggestion above cures it
I am at my wits end
At the moment I have a clunky workaround on the 2nd site (which is under development at present, but is up on my website here)


----------



## JiminSA (Dec 15, 2011)

This is the way I was triggering the selector script ...

```
[URL=#contact]Contact me[/URL]
```
javascript:

```
<script>
	function clickandsetFocus() {
		var fname = document.getElementById("fname");

		var firstElement = pageContainer.querySelector(fname);

		if (firstElement) { 
			firstElement.focus();
		}
	}
	</script>
```
Maybe it's incorrect?


----------



## ckphilli (Apr 29, 2006)

This is why I asked, getting this from firebug:

ReferenceError: pageContainer is not defined

ReferenceError: H5F is not defined

I think part of the problem has to be to do with your scripts loading.,


----------



## JiminSA (Dec 15, 2011)

Aha! thanks mate! I'll follow up and let you know ...


----------



## JiminSA (Dec 15, 2011)

OK, I have changed the selector script thus

```
<script>
	function clickandsetFocus() {
		var fname = document.getElementById("fname");
		var pageContainer = document.getElementById("wrapper");

		var firstElement = pageContainer.querySelector(fname);

		if (firstElement) { 
			firstElement.focus();
		}
	}
	</script>
```
I thought "pageContainer" was a js keyword or something
Unfortunately it still doesn't cut it ... should I be putting # in front of the id names?


----------



## ckphilli (Apr 29, 2006)

JiminSA said:


> OK, I have changed the selector script thus
> 
> ```
> <script>
> ...


Remove all the other stuff in the function above and replace with:

```
document.getElementById('fname').focus();
```
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_html_blur

Also, I would take out the autofocus attribute since it isn't being used.


----------



## JiminSA (Dec 15, 2011)

Did that Chris... unfortunately focus is not set when the link renders the contact "page" within the page.
I found this in SO which seems to indicate that


> autofocus will apply only for elements initially in the page, not elements loaded with Javascript.


which makes me think that the same applies to elements being rendered by a link - i.e. link and set focus, render, lose focus.
No way round it, methinks. Gonna drop it  and use my Clunky-fix, unless somebody comes up with a non-popup solution ...
But I'm not marking this thread solved:down:


----------



## ckphilli (Apr 29, 2006)

That's a shame  . I promise you just have a conflict somewhere, I just can't nail down what it is.


----------



## JiminSA (Dec 15, 2011)

You're most probably right Chris, but I'm afraid that my patience has run out Ho-Hum! Thanks for all your support


----------

