javascript - 垂直焦点在文本框上
问题描述
我需要通过按回车键将文本框聚焦在垂直中
第一排 然后第二排 然后第三排
这里我的脚本,
$(document).ready(function() {
$(".vertical_row1").keypress(function(event) {
if(event.keyCode == 13) {
textboxes = $("input.vertical_row1");
debugger;
currentBoxNumber = textboxes.index(this);
if (textboxes[currentBoxNumber + 1] != null) {
nextBox = textboxes[currentBoxNumber + 1]
nextBox.focus();
nextBox.select();
event.preventDefault();
return false
}
}
});
})
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><input class="vertical_row1" type="text" name="" value="" placeholder=""></td>
<td><input class="vertical_row2" type="text" name="" value="" placeholder=""></td>
</tr>
<tr>
<td><input class="vertical_row1" type="text" name="" value="" placeholder=""></td>
<td><input class="vertical_row2" type="text" name="" value="" placeholder=""></td>
</tr>
<table>
解决方案
(function ($) {
$.fn.formNavigation = function () {
$(this).each(function () {
// Events triggered on keydown (repeatable when holding the key)
$(this).find('input').on('keydown', function(e) {
// Vertical navigation using tab as OP wanted
if (e.which === 13 && !e.shiftKey) {
// navigate forward
if ($(this).closest('tr').next().find('input').length>0) {
// when there is another row below
e.preventDefault();
$(this).closest('tr').next().children().eq($(this).closest('td').index()).find('input').focus();
} else if ($(this).closest('tbody').find('tr:first').children().eq($(this).closest('td').index()+1).find('input').length>0) {
// when last row reached
e.preventDefault();
$(this).closest('tbody').find('tr:first').children().eq($(this).closest('td').index()+1).find('input').focus();
}
} else if (e.which === 13 && e.shiftKey) {
// navigate backward
if ($(this).closest('tr').prev().find('input').length>0) {
// when there is another row above
e.preventDefault();
$(this).closest('tr').prev().children().eq($(this).closest('td').index()).find('input').focus();
} else if ($(this).closest('tbody').find('tr:last').children().eq($(this).closest('td').index()-1).find('input').length>0) {
// when first row reached
e.preventDefault();
$(this).closest('tbody').find('tr:last').children().eq($(this).closest('td').index()-1).find('input').focus();
}
}
});
});
};
})(jQuery);
// usage
$('.gridexample').formNavigation();
<!DOCTYPE html>
<html>
<body>
<table class="gridexample">
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</tbody>
<table>
<!-- jQuery needed for this solution -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
</body>
</html>
推荐阅读
- javascript - 如何将信息传递给 Firefox 插件中的内容脚本?
- netsuite - 如何从 eclipse 安装和推送 Netsuite 包,而不是创建套件包
- javascript - 在浏览器中调试 bundle.js 文件而不修改 webpack 配置
- vb.net - {.NET} 通过 HttpListener 流式传输 MP4 文件发送整个文件而不是当前正在观看的部分
- python - 如何在 python3 代码中找到 python2 路径?
- scala - netlogo 中的无操作会减慢模型的速度吗?
- android - Android:如何检测项目何时在 ListView 中成功加载?
- javascript - 如何在 afterEach 中打印茉莉花测试规范?
- php - PHP数组处理能力下降
- c++ - 模板元编程特征表达式