个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我一直在研究一些更复杂的表单，其中字段的显示取决于表单中输入的值的某些条件。
但是，当通过 <Tab> 输入表单时键( <Tab> key->enter value-> <Tab> key)，它不会转到新出现的字段，而是转到之前可见的字段。
以下是简化的示例。如果您向编号为 1 的字段写入任何内容，则会触发更改事件并显示值为 2 的输入，但不会显示下一个要关注的输入。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<form>
<input id="input1" value="1" tabindex="1" onchange="$('#input2').show()">
<input id="input2" value="2" tabindex="2" style="display: none;">
<input id="input3" value="3" tabindex="3" onchange="$('#input4').show()">
<input id="input4" value="4" tabindex="4" style="display: none;">
<input id="input5" value="5" tabindex="5">
<input id="input6" value="6" tabindex="6">
</form>
由于其复杂性，我不想直接控制 <Tab> key 。此外，我无法使用 onchange="$('#input2').show();$('#input2').focus()"因为在它不是紧邻的下一个元素的情况下也使用相同的代码。有什么办法可以解决这个问题吗？
预先感谢您的任何意见/建议。
最佳答案
click here for a working solution on jsFiddle.
我使用按键来完成这项工作。
在示例中，您可以通过文本字段 1、3 和 5 向前和向后按 Tab 键，然后更改显示文本字段 2 的文本字段 1 的值；然后，您可以按 Tab 键切换到文本字段 2、3 和 5，依此类推。
我希望我正确理解了您的挑战并且这对您有所帮助。干杯。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input").live("keypress", function() {
$(this).next().show()
})
})
</script>
<style type="text/css">
.hidden {
display:none;
}
</style>
</head>
<body>
<form>
<input id="input1" value="1">
<input id="input2" value="2" class="hidden">
<input id="input3" value="3">
<input id="input4" value="4" class="hidden">
<input id="input5" value="5">
<input id="input6" value="6" class="hidden">
</form>
</body>
</html>
关于forms - 动态表单中的 TabIndex(元素根据情况出现)问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9001840/
26
4
0
我正在创建一个 sql server 存储过程，它将输入作为逗号分隔的 productid 或选项“全部”。当用户传入逗号分隔的产品 ID 时，查询应输出所有产品 ID 的数据。我使用“IN”语句执行
我有一个自动生成的 Web 服务客户端。我有很多复杂的类，我必须对其进行模式匹配。现在我的结构如下所示: val response = client.getResponse response matc
关闭。这个问题是opinion-based .它目前不接受答案。 想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 7年前关闭。 Improve this
我需要正确的 tsql 语法来解决这个问题: Select * from table where var_A='10' select * from table where var_B='10' 何时使
我遇到了这个问题。每当我运行程序并在需要时键入字母 m 时，我的 if 语句都不会识别它。有人知道为什么吗？我已经这样做了一个小时，但没有结果。 #include #include #includ
我从数据库列名称“你有护照”创建了一个表，用户回答是或否我如何将 css 应用到这个动态工作的表。 table, th, td { border: 1px solid black;
我对 LocationListener 类的 onStatusChanged 有一些疑问。 它知道它可以呈现三种状态:AVAILABLE、TEMPORARILY_UNAVAILABLE 和 OUT_O
当引入新的异常类型时，我总是不确定如何正确地做到这一点。有共同约定吗？你怎么做呢？ 我对您组织它们的范围感兴趣(将它们保留在它们所使用的单元中？在组件级别有一个单元？包级别？应用程序？) 这也会影响命
我使用以下内容创建了日期维度: https://www.codeproject.com/Articles/647950/Create-and-Populate-Date-Dimension-for-D
您好，我正在使用 Android 完全 Kiosk 浏览器，该浏览器使用 chrome Webview。但是 javascript 中的某些方法或函数无法正常工作，例如 window.print()。
我有以下代码: public void OpenFile(string FileName) { if (FileName == null)
获取索引越界异常 for (int recordData = 0; recordData < recordDataList.size(); recordData++) {
我使用它在发生错误时在登录中显示一条消息: × Invalid user or password
这是我的场景，我有一个异常列表，其中包含来自不同层次结构的任意异常，下面的代码快照将解释我需要做什么 private List connectionExceptions; try { // tryin
我尝试动态更新 Jtextpane 中的左缩进。但我不能!这是我尝试过的! DefaultStyledDocument document = (DefaultStyledDocument) textp
我不知道为什么这个异常不起作用...... import java.util.*; public class a { public static void main(String[] args
我目前在 case 中使用多个 when 时遇到问题。当我删除第二个当时，它就起作用了。这是什么问题？ 报告的MYSQL错误为: #1064 - You have an error in your S
例如，我有一个表记录用户查看和下载文件的事件， file_id user activity 2 Tim view 1 Ron
这是一个非常愚蠢的问题，但我需要一点安慰/帮助。我有当前的“递归”情况: void add( int value ) { // do something ... // if ( conditi
我尝试使用以下代码在按钮数组上注册回调。但我似乎无法理解如何绑定(bind)回调中需要的字符串。任何建议将不胜感激! for (var i = 0; i < this.car_types.length
我是一名优秀的程序员,十分优秀！