focus on next tabindex of HTML element onEnter keypress by JQuery
Solution 1
I found a couple of minor jQuery issues. Fixed here: JSFiddle.
This line:
$('*').attr('tabindex', tabindex).focus();
can be written like this:
$('[tabindex=' + tabindex + ']').focus();
and this:
$('#Msg').text($(this).id + " tabindex: " + tabindex
+ " next element: " + $('*').attr('tabindex').id);
is not calling the id attribute the jQuery way (you are using JavaScript syntax, but the result of $(this) is a jQuery object. So... $(this).id
becomes $(this).attr('id')
.
The form still has a submission problem, that I didn't dig too far into, but it changes focus and fills out the '#Msg' element now.
Solution 2
Here is my full working code to focusNextElement
on keydown
[Enter] without jQuery with JSFiddle example created based on the following stackoverflow answers:
<script type="text/javascript">
function focusNextElement() {
var focussableElements = 'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';
if (document.activeElement && document.activeElement.form) {
var focussable = Array.prototype.filter.call(document.activeElement.form.querySelectorAll(focussableElements),
function(element) {
return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement
});
var index = focussable.indexOf(document.activeElement);
focussable[index + 1].focus();
}
}
window.addEventListener('keydown', function(e) {
if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
if (e.target.nodeName === 'INPUT' && e.target.type !== 'textarea') {
e.preventDefault();
focusNextElement();
return false;
}
}
}, true);
</script>
Solution 3
Didn't want to make new post and make SPAM with solution I found useful.
Collected information from other sources (Brian Glaz code nice-one) and made cross-browser version of Focus Next Element In Tab-index using Enter key.
Tab-indexes are not one after another, but may also contain a space between (1,2,9,11,30,etc.)
var tabindex = 1; //start tabindex || 150 is last tabindex
$(document).keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13') { //onEnter
tabindex++;
//while element exist or it's readonly and tabindex not reached max do
while(($("[TabIndex='"+tabindex+"']").length == 0 || $("[TabIndex='"+tabindex+"']:not([readonly])").length == 0) && tabindex != 150 ){
tabindex++;
}
if(tabindex == 150){ tabindex = 1 } //reseting tabindex if finished
$("[TabIndex='"+tabindex+"']").focus()
return false;
}
});
$("input").click(function() { //if changing field manualy with click - reset tabindex
var input = $(this);
tabindex = input.attr("tabindex");
})
I hope that someone will find it useful. Feel free to edit/comment it.
Solution 4
var tab = $(this).attr("tabindex");
tab++;
$("[tabindex='"+tab+"']").focus();
Solution 5
Seeking for a solution for exactly this problem, I generated a small jquery function to find the next valid tabindex; suppose it's a bit easier to maintenance and maybe a bit faster than a while loop:
function getNextTabindex(currentTabIndex) {
return $("[tabindex]").index($("[tabindex=" + currentTabIndex + "]")) + 1;
}
Hope this to be helpful to whoever needs it; this is tested and works.
Explaning this in short: seek for the element of the current tabindex, find this element in the list of all tabindex elements, get the index of it and increase the index.
Then, using this function, you may select the next tabindex element that way:
$('[tabindex=' + getNextTabindex($(":focus").attr("tabindex")) + ']').focus();
I didn't test the call but suppose it to work.
Owais Qureshi
I'm an enthusiastic software developer currently working on web applications, Microsoft .Net is my favorite platform for development and C# is my form of expression. I find myself spending more time on stackoverflow(SO) than facebook , SO is a place to help others and learn from others :-). Technologies I like to work on: - C# - JavaScript ,jQuery with various plugins and libraries - ASP.net & MS-SQL, - Python with RethinkDB Tools: - Microsoft Visual Studio 2010,2012,2015 - SQL Server Management Studio Express 2005/2008 - Expression Web 4, - NetBeans and Eclipse - NotePad++ Other Interests: - Algorithms and Data Structures, - Exploring C# Language Specifics and .Net framework, - Game Development (Used Game Maker but now interested in HTML5) #SOreadytohelp
Updated on June 06, 2020Comments
-
Owais Qureshi almost 4 years
Hi Friends, I'm working on a small task which is to enable the user to tabindex the html element upon enter keypress.
As im new to jquery , I have written some code which seems to me that It will work ,but there are some problems in it.
Initial findings
The culprit code ,it doesnt work ,as the ouput in the Msg lablel is "Undefined"$('*').attr('tabindex').id
The code is given below and I have even created a JSFiddle.
JQuery
$(document).ready(function (eOuter) { $('input').bind('keypress', function (eInner) { if (eInner.keyCode == 13) //if its a enter key { var tabindex = $(this).attr('tabindex'); tabindex++; //increment tabindex //after increment of tabindex ,make the next element focus $('*').attr('tabindex', tabindex).focus(); **//Msg Label** //Just to print some msgs to see everything is working $('#Msg').text( this.id + " tabindex: " + tabindex + " next element: " + $('*').attr('tabindex').id); return false; // to cancel out Onenter page postback in asp.net } }); } );
HTML
<div> Employee Info<br /> Name<br /> <input name="TxtbxName" type="text" value="ok" id="TxtbxName" tabindex="1" /> <br /> Age<br /> <input name="TxtbxAge" type="text" id="TxtbxAge" tabindex="2" /> <br /> Gender<br /> <select name="DdlGender" id="DdlGender" tabindex="3"> <option selected="selected" value="Male">Male</option> <option value="Female">Female</option> </select> <br /> <div> Previous Employment<br /> <select name="DdlCompany" id="DdlCompany" tabindex="4"> <option selected="selected" value="0">Folio3</option> <option value="1">Null Soft</option> <option value="2">Object Soft</option> <option value="3">Excepption Soft</option> </select> or Enter Code <input name="TxtbxCompanyCode" type="text" id="TxtbxCompanyCode" tabindex="5" /> <br /> Address<br /> <input name="TxtbxAddress" type="text" id="TxtbxAddress" tabindex="6" /> <br /> <input type="submit" name="BtnSubmit" value="Submit" id="BtnSubmit" tabindex="7"/> <br /> <label id="Msg">Message here</label> </div> </div>
Let me know where I went wrong :/
-
Owais Qureshi almost 12 yearsHow to bind for keypress event , elements such as <select>
-
Owais Qureshi almost 12 yearsI wish I could upvote you more ,you made my several wasted hours useful , Thanks :)
-
Software Engineer almost 12 yearsThe previous jsfiddle jsfiddle.net/vansimke/PPB9s/3 has an error fixed in its next revision jsfiddle.net/PPB9s/4 with keypress event binding for
select
control. To bind keypress event with multiple control types, separate them with comma:$('input, select').bind('keypress', function(eInner){});
-
Owais Qureshi almost 12 years@Coder thanx for that but I'm going to use $(":input") ,which selects all the element which can take input such as textarea etc
-
Rajab Shakirov almost 8 yearsalso if you need focus to previous item by shift+tab then this answer will complete your: stackoverflow.com/questions/6421936/…
-
Owais Qureshi over 7 yearsThanks for posting your solution !
-
snorri about 7 yearsThis is the best solution I found so far. But since keyCode is deprecated, I recommend replacing it with
e.key == 'Enter'