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!
2 answers
solution1
2 ACCPTED 2013-07-17 19:41:26
$(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.
solution2
2 2013-07-17 19:41:30
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.