Best way to find “next” form input element in jQuery?
Using jQuery, what\'s the best way to find the next form element on the page, starting from an arbitrary element? When I say form element I mean ,
-
I came up with a function that does the job without explicitly defining indexes:
function nextInput(form, id) { var aInputs = $('#' + form).find(':input[type!=hidden]'); for (var i in aInputs) { if ($(aInputs[i]).attr('id') == id) { if (typeof(aInputs[parseInt(i) + 1]) != 'undefined') { return aInputs[parseInt(i) + 1]; } } } }And here's a working example. The form tags are for consistency. All you really need is a common parent and could even just use the body tag as the parent (with a slight modification to the function).
Paste this into a file and open with firefox / firebug and you'll see it returns the correct element for all your examples:
<html> <head> <script src="http://www.google.com/jsapi"></script> <script> function nextInput(form, id) { var aInputs = $('#' + form).find(':input[type!=hidden]'); for (var i in aInputs) { if ($(aInputs[i]).attr('id') == id) { if (typeof(aInputs[parseInt(i) + 1]) != 'undefined') { return aInputs[parseInt(i) + 1]; } } } } google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { console.log(nextInput('myform1', 'this1')); console.log(nextInput('myform2', 'this2')); console.log(nextInput('myform3', 'this3')); console.log(nextInput('myform4', 'this4')); }); </script> </head> <body> <form id="myform1"> <ul> <li><input type="text" /></li> <li><input id="this1" type="text" /></li> </ul> <ul> <li><input id="next1" type="text" /></li> </ul> </form> <form id="myform2"> <ul> <li><input type="text" /></li> <li><input id="this2" type="text" /></li> </ul> <ul> <li><input id="next2" type="text" /></li> </ul> </form> <form id="myform3"> <input id="this3" type="text" /> <input id="next3" type="text" /> </form> <form id="myform4"> <div> <input id="this4" type="text" /> <input type="hidden" /> <div> <table> <tr><td></td><td><input id="next4" type="text" /></td></tr> </table> </div> <button></button> </div> </form> </body> </html>讨论(0) -
All solutions using index (or nextAll) will only work where all the form inputs are siblings, e.g. within the same
<div>block. The following gets round that by creating an array of ids of all visible, non-readonly inputs on the page and picks out the first one after the current control, wrapping round if the current control is the last one on the page.ids = $(":input:visible:not([readonly])").map(function () { return this.id }); nextId = ids[($.inArray($(this).attr("id"), ids) + 1) % ids.length]; $("#" + nextId).focus();Using the map function makes it a little more succinct than solutions involving iterators.
讨论(0) -
You could give each form item an id (or unique class name) that identified it as a form element and also gave it an index. For example:
<div> <input id="FormElement_0" type="text" /> <input id="FormElement_1" type="text" /> <div>Then, if you want to traverse from the first element to the second you can do something like this:
//I'm assuming "this" is referring to the first input //grab the id var id = $(this).attr('id'); //get the index from the id and increment it var index = parseInt(id.split('_')[0], 10); index++; //grab the element witht that index var next = $('#FormElement_' + index);The benefit of this is that you can tag any element to be next, regardless of location or type. You can also control the order of your traversal. So, if for any reason you want to skip an element and come back to it later, you can do that too.
讨论(0) -
kudos,
What about using .index?
e.g
$(':input:eq(' + ($(':input').index(this) + 1) + ')');讨论(0) -
You can do this to take a complete list of the form elements you are looking for:
var yourFormFields = $("yourForm").find('button,input,textarea,select');Then, should be easy find the next element:
var index = yourFormFields.index( this ); // the index of your current element in the list. if the current element is not in the list, index = -1 if ( index > -1 && ( index + 1 ) < yourFormFields.length ) { var nextElement = yourFormFields.eq( index + 1 ); }讨论(0) -
This solution does not require indexes, and also plays nicely with tabindex - in other words, it gives you the exact element that the browser would give you on tab, every time, without any extra work.
function nextOnTabIndex(element) { var fields = $($('form') .find('a[href], button, input, select, textarea') .filter(':visible').filter('a, :enabled') .toArray() .sort(function(a, b) { return ((a.tabIndex > 0) ? a.tabIndex : 1000) - ((b.tabIndex > 0) ? b.tabIndex : 1000); })); return fields.eq((fields.index(element) + 1) % fields.length); }It works by grabbing all tabbable fields in the form (as allowed by http://www.w3.org/TR/html5/editing.html#focus-management), and then sorting the fields based on (http://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute) to work out the next element to tab to. Once it has that, it looks at where the passed in field is in that array, and returns the next element.
A few things to note:
- jQuery appears to support sort() on a jQuery object, but I can't find it explicitly in the documentation, hence calling toArray() and then rewrapping the array in a jQuery object.
- There are other fields that it is okay to tab to, but I left them out as they aren't standard form fields.
The code I used to test this was (using jQuery 1.7):
<script> $(function() { $('a[href], button, input, select, textarea').click(function() { console.log(nextOnTabIndex($(this)).attr('name')); }) }); </script> <form> <input type='text' name='a'/> <input type='text' name='b' tabindex='1' /> <a>Hello</a> <input type='text' name='c'/> <textarea name='d' tabindex='2'></textarea> <input id='submit' type='submit' name='e' tabindex='1' /> </form>讨论(0)
加载中...
- 热议问题