如何解决使用Enter键从输入切换焦点
我有一个html表单,我需要使用Enter键将焦点从输入中切换(感谢上司说,大多数人不知道Tab键的用途) 我已经尝试过此解决方案
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
jQuery.extend(jQuery.expr[':'],{
focusable: function (el,index,selector) {
return $(el).is('a,button,:input,[tabindex]');
}
});
$(document).on('keydown','focusable',function (e) {
if (e.which == 13) {
e.preventDefault();
var $canfocus = $(':focusable');
var index = $canfocus.index(this) + 1;
if (index >= $canfocus.length) index = 0;
$canfocus.eq(index).focus();
}
});
</script>
这是我的表格
<form method = "post" action = "<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>">
<label for = "maquina">Maquina:</label><span class = "error"> * <?php echo $maquinaErr;?></span><br>
<input type = "number" id = "maquina" name = "maquina" size = "20" tabindex = "1" value = "<?php echo $maquina;?>" autofocus><br><br>
<label for = "gafete">Numero de gafete:</label><span class = "error" id = "eGafete"> * <?php echo $gafeteErr;?></span><br>
<input type = "number" id = "gafete" name = "gafete" size = "20" tabindex = "2" value = "<?php echo $gafete;?>" onchange = "llamarGafete()">
<br><br>
<label for = "nparte">Numero de parte del componente:</label><span class = "error" id = "eNparte"> * <?php echo $nparteErr;?></span><br>
<input type = "number" id = "nparte" name = "nparte" size = "20" tabindex = "3" value = "<?php echo $nparte;?>" onchange = "llenarUM()"><br><br>
<label for = "um">UM:</label><span class = "error"> * <?php echo $umErr;?></span><br>
<input type = "text" id = "um1" name = "um" size = "20" tabindex = "-1" value = "<?php echo $um;?>" readonly><br><br>
<label for = "cantidad">Cantidad:</label><span class = "error"> * <?php echo $cantidadErr;?></span><br>
<input type = "number" id = "cantidad" name = "cantidad" size = "20" tabindex = "4" value = "<?php echo $cantidad;?>"><br><br>
<label for = "defecto">Defecto/Motivo:</label><span class = "error"> * <?php echo $defectoErr;?></span><br>
</form>
解决方法
您忘了在新的可聚焦伪类前面加上:
$(document).on('keydown',':focusable',function (e) {
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。