Focus the first input on load only if no input is focused

Question

I'm trying to set a default focus for all the pages of my site but without changing the focus on page reload.

I mean:

User opens a page.
Focus is automatically set on the 1st input.
User changes focus to the 3rd input.
User refreshes the page.
Focus must not change to the 1st input again. (This is the requirement I fail to accomplish).

My current code is as follows:

$(document).ready(function() {

    if($(':focus').length === 0) {
        $(':input:not([type="hidden"]):first').focus();
    }

});

The condition is true every time!

Why would you assume the state would be saved if you refresh the page? — dsgriffin, Jul 17 '13 at 19:15
I have a solution but you have to use localStorage for it,is it ok? — HIRA THAKUR, Jul 17 '13 at 19:18
@Zenith My browser saves the focus when I refresh or go back. Is that impossible to detect with javascript? — Adrián, Jul 17 '13 at 19:18
@AdriánLópez Not impossible. I think MESSIAH should post an answer for you. — dsgriffin, Jul 17 '13 at 19:20
@MESSIAH Never used that before, it's like a local html5 DB or something, isn't it. — Adrián, Jul 17 '13 at 19:22
Cookies vs LocalStorage... both can provide the same thing in this regard, that is if you want maximum compatibility. — zamnuts, Jul 17 '13 at 19:22
yes,its very simple and the you just have to use localstorage.setitem and localstorage.getitem — HIRA THAKUR, Jul 17 '13 at 19:23

score 2 · Accepted Answer · edited May 23 '17 at 10:31

2

$(document).ready({

window.onload=function(){
if(session.Storage.getItem("text3")){//if key= text3 is set,then change the focus to 3rd text box.
$('#your3rdTextID').focus();
}


$('#your3rdTextID').focus(function(){
    session.Storaage.setItem("text3","selected")//here you set the key as text3 and value as selected for later use.
});


});

You can provide with your own custom conditions.This is just a small example.Hope it helped you.Good luck with your project.

LINK-->HTML5 Local storage vs. Session storage

LINK-->http://www.w3schools.com/html/html5_webstorage.asp

edited May 23 '17 at 10:31

Community

1
1

answered Jul 17 '13 at 19:41

HIRA THAKUR

17,189
14
56
87

Do I have a different `session.Storage` for each of the pages or just one for the whole site? Do you know? – Adrián Jul 17 '13 at 20:00
well,its pretty simple.session persist till the close of your browser until the browser is closed.Its valid to all your pages within the website. LOCALSTORAGE persist even after browser close. You can clear local storage with localstorage.clear(). – HIRA THAKUR Jul 17 '13 at 20:02
mm I would need a dictionary/map like with the cookie solution – Adrián Jul 17 '13 at 20:04
There are some other methods as well---persist.js and jstorage.Google them for more informaton.Http are stateless,using web storage or cookies or any other js library serves you requirement. – HIRA THAKUR Jul 17 '13 at 20:05
@AdriánLópez: dictionary/map? – HIRA THAKUR Jul 17 '13 at 20:06
@AdriánLópez, mind your browsers. If your application relies on legacy support, local storage is not the answer, although a great alternative. – zamnuts Jul 17 '13 at 20:07
IE7+ supports all webstorage. Obviously,rest of them all do quite a good job.Surprisingly,IE leads in localstorage giving maximum of 10 mb storage. – HIRA THAKUR Jul 17 '13 at 20:08
[Here](http://www.gwtproject.org/doc/latest/DevGuideHtml5Storage.html#Overview) it says that the localStorage scope is only the window/tab. By dictionary I meant that I want to store it for every form in my site. So if I have a separated storage per page, I wouldn't need to define an structure to associate the value to the page where the focus belongs. – Adrián Jul 17 '13 at 20:10
If you want IE7 support,go with jstorage which is a new emerging js or go with cookies as suggested by zamnuts. – HIRA THAKUR Jul 17 '13 at 20:11
@zamnuts it's for my final graduation project, not for the real world so I don't really need much legacy support. – Adrián Jul 17 '13 at 20:13
1

if you want IE7+,I would say prefer local storage as they have more storing capacity than cookies(4kb for each cookies with per domain setting up to 20 cookies).No such restriction on local.Storage..Besides its very simple to learn!!! – HIRA THAKUR Jul 17 '13 at 20:15
1

Well, it's only for remembering the focus (for now :D), even 1kb would be more than enough. But I'll take that into account just in case I need more capacity for other requirements. – Adrián Jul 17 '13 at 20:20

score 2 · Answer 2 · edited May 23 '17 at 12:26

This will work (tested in latest Chrome, IE7 and IE10). Sets a cookie on focus remembering the last focused element, if not, it defaults to the first. It relies on jquery.cookie.js (usage explained in this SO answer). Here is the full HTML+JS source of a minimal working example. Consider changing the cookie name and the input selector (currently 'input'):

<!doctype html>
<html>
<head>
    <title>focus test</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.cookie.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var $input = $('input'), // get all the inputs
                cookieName = 'lastInputFocusIndex', // for consistency
                lastIndex = $.cookie(cookieName) || 0; // get the last known index, otherwise default to zero
            $input.on('focus',function(){ // when any of the selected inputs are focused
                if ( $(this).attr('type') !== 'submit' ) {
                    $.cookie(cookieName,$input.index(this)); // get their index in the $input list and store it
                }
            });
            $input.eq(lastIndex).focus(); // when the page loads, auto focus on the last known index (or the default of 0)
        });
    </script>
</head>
<body>

<form method="get" action="">
    <p><input type="text" name="first" /></p>
    <p><input type="text" name="second" /></p>
    <p><input type="text" name="third" /></p>
    <p><input type="submit" value="Go" /></p>
</form>

</body>
</html>

Alternatively, you could write your own raw cookies instead of using the cookie helper jQuery plugin; I used it to simplify things.

So I would need a cookie for each page with a form in my site, right? — Adrián, Jul 17 '13 at 19:45
@AdriánLópez With this exact implementation, yes. However, it could be enhanced: if you have a generic cookie name and store an object in it (use the page name as a key, e.g. `{'home':INDEX,'about':INDEX,'contact':INDEX}`, then you can pull it specifically for a page but keep them all in the same place (minimizing cookie overload). I did not specifically target that use case since it was not mentioned in your original question scope. — zamnuts, Jul 17 '13 at 19:49

Focus the first input on load only if no input is focused

2 Answers2