- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的表单中有一个 3x3 的表格。默认情况下,Tab 键在这些输入字段上沿水平方向移动光标。当给出 tabindex 时(如下例所示),tab 键按照我的需要按列而不是按行移动光标。
通过SO答案的各种来源,我想出了Jquery来使用回车键作为选项卡。但是,无法弄清楚如何按照上面实现的 tabindex 进行操作,即通过按 Enter 键而不是光标按行移动,我希望它按列移动。以下是我迄今为止所掌握的内容,感谢您的帮助。
演示其当前的工作原理。 http://jsfiddle.net/unCu5/125/
以下代码来源:jquery how to catch enter key and change event to tab
<table>
<tr>
<td><input tabindex="1" placeholder="1" /></td>
<td><input tabindex="2" placeholder="2" /></td>
<td><input tabindex="3" placeholder="3" /></td>
</tr><tr>
<td><input tabindex="1" placeholder="1" /></td>
<td><input tabindex="2" placeholder="2" /></td>
<td><input tabindex="3" placeholder="3" /></td>
</tr><tr>
<td><input tabindex="1" placeholder="1" /></td>
<td><input tabindex="2" placeholder="2" /></td>
<td><input tabindex="3" placeholder="3" /></td>
</tr>
</table>
$('input').live("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
})
@Dekel 解决方案适用于他显示的 html 场景,但我在查看源代码时有不同类型的 HTML。我该如何解决这个问题
最佳答案
您可以找到下一个元素(基于 tabindex)并关注他,而不是仅仅关注下一个 input
元素:
$('input[tabindex^="2"]');
检查这个例子:
$(document).ready(function () { // Will only run once the page Document Object Model (DOM) is ready for JavaScript code
// Create a jQuery object containing the html element 'input'
// Create a .not() method to exclude buttons for keypress event
$(":input:not(:disabled)").not($(":button")).keypress(function(evt) {
// If the keypress event code is 13 (Enter)
if (evt.keyCode == 13) {
// get the attribute type and if the type is not submit
itype = $(this).prop('type');
if (itype !== 'submit') {
currentTabindex = $(this).attr('tabindex');
if (currentTabindex) {
nextInput = $('input[tabindex^="'+ (parseInt(currentTabindex)+1) +'"]');
if (nextInput.length) {
nextInput.focus();
return false;
}
}
}
}
});
});
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<table>
<tr>
<td><input tabindex="1" placeholder="1" /></td>
<td><input tabindex="4" placeholder="4" /></td>
<td><input tabindex="7" placeholder="7" /></td>
</tr><tr>
<td><input tabindex="2" placeholder="2" /></td>
<td><input tabindex="5" placeholder="5" /></td>
<td><input tabindex="8" placeholder="8" /></td>
</tr><tr>
<td><input tabindex="3" placeholder="3" /></td>
<td><input tabindex="6" placeholder="6" /></td>
<td><input tabindex="9" placeholder="9" /></td>
</tr>
</table>
The code doesn't support go back from the last input to the first. You will need to write it explicitly.
tabindex
值最初的问题没有提到 tabindex
可以重复或没有顺序值。此代码将根据代码中的顺序以及 tabindex
的值来“修复”tabindex 的值。它将支持重复的 tabindex 值和非顺序值(1、2、3、6、7):
function fixTabIndex() {
// Find all inputs. Their order will be the same order they appear inside your html.
inputs = $('input');
// Save the original HTML order of the inputs (we need this to compare their order in the HTML in case or equal two tabindex
inputs_original = $('input');
// Sort the inputs by their tabindex values and their position in the DOM
// More info on Array.prototype.sort: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
inputs.sort(function(a, b) {
if ($(a).attr('tabindex') == $(b).attr('tabindex')) {
// If tabindex is equal - sort by the position in the DOM
if (inputs_original.index(a) < inputs_original.index(b)) {
return -1;
} else {
return 1;
}
} else if ($(a).attr('tabindex') < $(b).attr('tabindex')) {
return -1;
} else {
return 1;
}
});
// Set the new value of the tabindex based on the position in the sorted array
inputs.each(function(i, el) {
$(el).attr('tabindex', i+1);
});
}
$(document).ready(function () {
// First we need to fix the tabindex values:
fixTabIndex();
$("input").keypress(function(evt) {
// If the keypress event code is 13 (Enter)
if (evt.keyCode == 13) {
// Make sure this is not a submit input
if ($(this).prop('type') !== 'submit') {
currentTabindex = $(this).attr('tabindex');
if (currentTabindex) {
nextInput = $('input[tabindex^="'+ (parseInt(currentTabindex)+1) +'"]');
if (nextInput.length) {
nextInput.focus();
return false;
}
}
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input tabindex="1" placeholder="1" /></td>
<td><input tabindex="2" placeholder="2" /></td>
<td><input tabindex="3" placeholder="3" /></td>
</tr><tr>
<td><input tabindex="1" placeholder="1" /></td>
<td><input tabindex="2" placeholder="2" /></td>
<td><input tabindex="3" placeholder="3" /></td>
</tr><tr>
<td><input tabindex="1" placeholder="1" /></td>
<td><input tabindex="2" placeholder="2" /></td>
<td><input tabindex="3" placeholder="3" /></td>
</tr>
</table>
关于javascript - Enter 键跟随 tabindex(在 Enter 键更改为 Tab 的情况下),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38489379/
我是 Java 新手,这是我的代码, if( a.name == b.name && a.displayname == b.displayname && a.linknam
在下面的场景中,我有一个 bool 值。根据结果,我调用完全相同的函数,唯一的区别是参数的数量。 var myBoolean = ... if (myBoolean) { retrieve
我是一名研究 C++ 的 C 开发人员: 我是否正确理解如果我抛出异常然后堆栈将展开直到找到第一个异常处理程序?是否可以在不展开的情况下在任何 throw 上打开调试器(即不离开声明它的范围或任何更高
在修复庞大代码库中的错误时,我观察到一个奇怪的情况,其中引用的动态类型从原始 Derived 类型更改为 Base 类型!我提供了最少的代码来解释问题: struct Base { // some
我正在尝试用 C# 扩展给定的代码,但由于缺乏编程经验,我有点陷入困境。 使用 Visual Studio 社区,我尝试通过控制台读出 CPU 核心温度。该代码使用开关/外壳来查找传感器的特定名称(即
这可能是一个哲学问题。 假设您正在向页面发出 AJAX 请求(这是使用 Prototype): new Ajax.Request('target.asp', { method:"post", pa
我有以下 HTML 代码,我无法在所有浏览器中正常工作: 我试图在移动到
我对 Swift 很陌生。我如何从 addPin 函数中检索注释并能够在我的 addLocation 操作 (buttonPressed) 中使用它。我正在尝试使用压力触摸在 map 上添加图钉,在两
我设置了一个详细 View ,我是否有几个 Nib 文件根据在 Root View Controller 的表中选择的项目来加载。 我发现,对于 Nibs 的类,永远不会调用 viewDidUnloa
我需要动态访问 json 文件并使用以下代码。在本例中,“bpicsel”和“temp”是变量。最终结果类似于“data[0].extit1” var title="data["+bpicsel+"]
我需要使用第三方 WCF 服务。我已经在我的证书存储中配置了所需的证书,但是在调用 WCF 服务时出现以下异常。 向 https://XXXX.com/AHSharedServices/Custome
在几个 SO 答案(1、2)中,建议如果存在冲突则不应触发 INSERT 触发器,ON CONFLICT DO NOTHING 在触发语句中。也许我理解错了,但在我的实验中似乎并非如此。 这是我的 S
如果进行修改,则会给出org.hibernate.NonUniqueObjectException。在我的 BidderBO 类(class)中 @Override @Transactional(pr
我使用 indexOf() 方法来精细地查找数组中的对象。 直到此刻我查了一些资料,发现代码应该无法正常工作。 我在reducer中尝试了上面的代码,它成功了 let tmp = state.find
假设我有以下表格: CREATE TABLE Game ( GameID INT UNSIGNED NOT NULL, GameType TINYINT UNSIGNED NOT NU
代码: Alamofire.request(URL(string: imageUrl)!).downloadProgress(closure: { (progress) in
我是一名优秀的程序员,十分优秀!