实现密码输入框输入一个自动下一个，删除自动上一个位置
each语法
index - 选择器的 index 位置。
element - 当前的元素（也可使用 "this" 选择器）。
$(selector).each(function(index,element))
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://www.jianbaizhan.com/home/js/jquery.js"></script>
</head>
<body>
<div id="pwd">
<input type="password" value="5">
<input type="password" value="2">
<input type="password" value="0">
<input type="password" value="5">
<input type="password" value="2">
<input type="password" value="0">
</div>
<input type="button" value="获取">
<script>
$(function () {
$("input[type='button']").click(function () {
var pass = ''
$("input[type='password']").each(function () {
pass += $(this).val()
})
alert(pass)
})
//输入自动切换下一个input
//方法一
$("body").on('keyup', "#pwd input[type='password']", function (event) {
switch (event.keyCode) {
case 8:
//删除键，删除后自动切换到上一个input
var pass_input = $(this).prev();
if (pass_input.length) {
pass_input.focus();
pass_input.select();
}
break;
default:
//默认下一个input
var pass_input = $(this).next();
if (pass_input.length) {
pass_input.focus();
pass_input.select();
}
break;
}
});
//方法二
// var pass_input = $("input[type='password']");
// for (var i = 0; i < pass_input.length; i++) {
// var input = pass_input[i];
// input.index = i;
// input.onkeyup = function (event) {
// switch (event.keyCode) {
// case 8:
// //删除键，删除后自动切换到上一个input
// var prev = this.index - 1;
// if (prev < 0) return;
// pass_input[prev].focus();
// pass_input[prev].select();
// break;
// default:
// //默认下一个input
// this.value = this.value.replace(/^(.).*$/, '$1');
// var next = this.index + 1;
// if (next > pass_input.length - 1) return;
// pass_input[next].focus();
// break;
// }
// }
// }
})
</script>
</body>
</html>本文作者： Liaodeity
本文链接： https://www.jianbaizhan.com/article/648
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！