问题:
I want to focus on the second table in the same way I did with the first table but I couldn't set focus on the second table.
(function ($) {
$.fn.formNaviga...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
I want to focus on the second table in the same way I did with the first table but I couldn't set focus on the second table.
(function ($) {
$.fn.formNavigation = function () {
$(this).each(function () {
$(this).find('input').on('keydown', function(e) {
if (e.which === 13 && !e.shiftKey) {
if ($(this).closest('td').next().find('input').length>0) {
e.preventDefault();
$(this).closest('td').next().find('input').focus();
} else if ($(this).closest('tr').next().children().eq(1).find('input').length>0) {
e.preventDefault();
$(this).closest('tr').next().children().eq(0).find('input').focus();
} else if ($(this).siblings('table')) {
//$(this).closest('table').find('tr').children().eq($(this).closest('td').index()).find('input').focus();
}
}
});
});
};
})(jQuery);
$('.gridexample').formNavigation();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="gridexample">
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
<table class="gridexample">
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
Is there any way to set focus on the second table? ->tr->td
回答1:
It looks like you want the enter/return key to act like a tab key? If so then, then target the tags as a jQuery Collection (i.e. $('input')
) and just bind to the top ancestor tag -- an ancestor that is shared by all tags within the collection (i.e. $('table')
). The extension has been modified so that you can pass in any selector for ancestor and collection parameters, so now you can target anything rather than just input
.
Demo 1 is the setup required in OP question -- input
in a table
.
Demo 2 is setup with a mixed collection -- textarea
and select
in a form
.
Demo 1
(function($) {
$.fn.enterNav = function(collection) {
$(collection).on('keydown', function(e) {
var idx = $(this).index(collection);
if (e.which === 13 && !e.shiftKey) {
$(collection).eq(idx + 1).focus();
}
});
}
})(jQuery);
// $(ancestor).enterNav(collection)
$('table').enterNav('input');
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
<hr>
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Demo 2
(function($) {
$.fn.enterNav = function(collection) {
$(collection).on('keydown', function(e) {
var idx = $(this).index(collection);
if (e.which === 13 && !e.shiftKey) {
$(collection).eq(idx + 1).focus();
}
});
}
})(jQuery);
// $(ancestor).enterNav(collection)
$('form').enterNav('textarea, select');
<form>
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
<select>
<option>Looks</option>
<option>like</option>
<option>it</option>
</select>
<select>
<option>works</option>
<option>OK</option>
<option>?</option>
</select>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
回答2:
No jQuery here, just plain old js does the trick. As per your request in the comments above, focus is set on the first entry in the second table. Note that no additional class or id specifications are necessary for this.
// Target last table in the group
tables = document.getElementsByClassName('gridexample');
targetTable = tables[tables.length - 1];
// Target first row of the last table
tableRows = targetTable.getElementsByTagName('tr');
targetRow = tableRows[0];
// Target first entry of the first row of the last table
rowEntries = targetRow.getElementsByTagName('td');
targetEntry = rowEntries[0];
// Get the input field and set focus
targetEntry.getElementsByTagName('input')[0].focus();
<table class="gridexample">
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
<table class="gridexample">
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>