按下回车键时继续下一次输入，如果有隐藏输入则忽略

Question

这里有一个函数脚本，当用户按enter键时，它将移动到下一个元素。我的问题是隐藏的元素导致我的脚本无法继续到下一个字段，因为下一个元素是隐藏的。

如何忽略隐藏的输入/元素？

$(document).ready(function() {
$('#civil_status').keyup(function() {
var status = $(this).val();
if (status == '2') {
$('#civilstatus_div').css('display', '');
$('#spouse_name').attr('disabled', false);
} else {
$('#civilstatus_div').css('display', 'none');
$('#spouse_name').attr('disabled', true);
$("#spouse_name").val('');
}
});
});
$("input, select, textarea").not($(":button")).keypress(function(evt) {
if (evt.keyCode == 13) {
iname = $(this).val();
if (iname !== 'Submit') {
var fields = $(this).parents('form:eq(0),body').find('button, input, textarea, select, hidden');
var index = fields.index(this);
if (index > -1 && (index + 1) < fields.length) {
fields.eq(index + 1).focus();
}
return false;
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="row mt-3">
<div class="col-lg-4">
<label class="float-left col-sm-12 col-form-label" for="civil_status"><small><b>CIVIL STATUS:</b></small></label>
</div>
<div class="col-lg-8">
<center>
<input class="form-control form-control-sm col-sm-11" name="civil_status" id="civil_status" type="text" style="text-transform: uppercase; outline: 0;text-align:center;">
</center>
<div class="row justify-content-center mr-4">
<span><small>&nbsp;1-Single, 2-Married, 3-Widowed, 4-Separated</small></span>
</div>
</div>
</div>
<div class="row mt-1" style="display:none;" id="civilstatus_div">
<div class="col-lg-4 mt-0">
<label class="float-left col-sm-12 col-form-label" for="spouse_name"><small><b>NAME OF SPOUSE<br>IF MARRIED:</b></small></label>
</div>
<div class="col-lg-8 mt-3">
<center>
<span id="spouse_hidden"></span>
<input class="form-control form-control-sm col-sm-11" name="spouse_name" id="spouse_name" type="text" style="text-transform: uppercase; outline: 0;text-align:center;">
</center>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-4 mt-0">
<label class="float-left col-sm-12 col-form-label" for="mainden_name"><small><b>MOTHER'S<br>MAIDEN NAME:</b></small></label>
</div>
<div class="col-lg-8 mt-3">
<center>
<input class="form-control form-control-sm col-sm-11" name="mainden_name" id="mainden_name" type="text" style="text-transform: uppercase; outline: 0;text-align:center;">
</center>
</div>
</div>

这是我的工作样品

Answer 1

要解决此问题，只需从fields变量中选择的元素中排除隐藏元素。要执行此操作，请使用.not()。

还要注意，用于查找字段的选择器可以缩短为仅:input。

var fields = $(this).parents('form:eq(0),body').find(':input').not(':hidden');

此外，第二个函数在document.ready处理程序之外。您需要更正此函数周围的大括号和圆括号。

工作示例：

jQuery($ => {
$('#civil_status').keyup(function() {
var status = $(this).val();
let shouldEnable = this.value.trim() === '2';
$('#civilstatus_div').toggle(shouldEnable);
$('#spouse_name').prop('disabled', !shouldEnable).val('');
});
$("input, select, textarea").not($(":button")).keypress(function(evt) {
if (evt.keyCode == 13) {
iname = $(this).val();
if (iname !== 'Submit') {
var fields = $(this).parents('form:eq(0),body').find(':input').not(':hidden');
var index = fields.index(this);
if (index > -1 && (index + 1) < fields.length) {
fields.eq(index + 1).focus();
}
return false;
}
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mt-3">
<div class="col-lg-4">
<label class="float-left col-sm-12 col-form-label" for="civil_status"><small><b>CIVIL STATUS:</b></small></label>
</div>
<div class="col-lg-8">
<center>
<input class="form-control form-control-sm col-sm-11" name="civil_status" id="civil_status" type="text" style="text-transform: uppercase; outline: 0;text-align:center;">
</center>
<div class="row justify-content-center mr-4">
<span><small>&nbsp;1-Single, 2-Married, 3-Widowed, 4-Separated</small></span>
</div>
</div>
</div>
<div class="row mt-1" style="display:none;" id="civilstatus_div">
<div class="col-lg-4 mt-0">
<label class="float-left col-sm-12 col-form-label" for="spouse_name"><small><b>NAME OF SPOUSE<br>IF MARRIED:</b></small></label>
</div>
<div class="col-lg-8 mt-3">
<center>
<span id="spouse_hidden"></span>
<input class="form-control form-control-sm col-sm-11" name="spouse_name" id="spouse_name" type="text" style="text-transform: uppercase; outline: 0;text-align:center;">
</center>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-4 mt-0">
<label class="float-left col-sm-12 col-form-label" for="mainden_name"><small><b>MOTHER'S<br>MAIDEN NAME:</b></small></label>
</div>
<div class="col-lg-8 mt-3">
<center>
<input class="form-control form-control-sm col-sm-11" name="mainden_name" id="mainden_name" type="text" style="text-transform: uppercase; outline: 0;text-align:center;">
</center>
</div>
</div>
<!-- this will be ignored -->
<input type="hidden" name="hidden" />
<div class="row">
<div class="col-lg-4 mt-0">
<label class="float-left col-sm-12 col-form-label" for="mainden_name"><small><b>FOO'S<br>MAIDEN NAME:</b></small></label>
</div>
<div class="col-lg-8 mt-3">
<center>
<input class="form-control form-control-sm col-sm-11" name="mainden_name" id="foo" type="text" style="text-transform: uppercase; outline: 0;text-align:center;">
</center>
</div>
</div>

顺便说一句，如果第一个input是select，那么批次更有意义。那么你就不需要依赖人们来键入正确的数字了