前端开发input框 输完直接跳到下一个
摘要：前端网页开发如何自学|前端开发的编辑器|前端组件化开发2018 html 代码 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title&g……
前端网页开发如何自学|前端开发的编辑器|前端组件化开发2018
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>html的input输完一个直接跳到下一个</title>
<style>
.input input {
display: inline-block;
}
.input {
width: 580px;
height: 41px;
line-height: 41px;
margin-right: 20px;
}
.input input {
border: 1px solid #ccc;
width: 100px;
height: 40px;
outline: none;
font-size: 14px;
font-weight: inherit;
text-align: center;
line-height: 40px;
color: #000;
background: #fff;
margin-right: 10px;
margin-left: 10px;
font-family: “microsoft yahei”;
}
.input:first-child {
margin-left: 0;
}
</style>
</head>
<body>
<div class=”input” id=”coupon”>
<input type=”tel” placeholder=”红” name=”sn1″ maxlength=”3″ id=”sn1″> –
<!-
->
<input type=”tel” placeholder=”包” name=”sn2″ maxlength=”3″ id=”sn2″> –
<!-
->
<input type=”tel” placeholder=”密” name=”sn3″ maxlength=”3″ id=”sn3″> –
<!-
->
<input type=”tel” placeholder=”钥” name=”sn4″ maxlength=”3″ id=”sn4″>
</div>
</body>
<script>
$(document).ready(function () {
$(“#sn1”).focus();
//自动跳到下一个输入框
$(“input[name^=’sn’]”).each(function () {
var that = $(this);
that.keyup(function () {
if (that.val().length === 3) {
if (that.val().trim().length < 3) {
var TheVal = that.val().trim();
that.val(TheVal)
} else if (that.next()) {
that.next().focus();
}
}
})
});
});
</script>
</html>
评论中有提到中间留空的问题，我觉得不是很有必要，两边留白看不见，影响用户体验，中间却不会。
不过还是做了一个，不管输入什么，只保留数字，其他字母空格都没发输入。
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>html的input输完一个直接跳到下一个</title>
<style>
.input input {
display: inline-block;
}
.input {
width: 580px;
height: 41px;
line-height: 41px;
margin-right: 20px;
}
.input input {
border: 1px solid #ccc;
width: 100px;
height: 40px;
outline: none;
font-size: 14px;
font-weight: inherit;
text-align: center;
line-height: 40px;
color: #000;
background: #fff;
margin-right: 10px;
margin-left: 10px;
font-family: “microsoft yahei”;
}
.input:first-child {
margin-left: 0;
}
</style>
</head>
<body>
<div class=”input” id=”coupon”>
<input type=”tel” placeholder=”红” name=”sn1″ maxlength=”3″ id=”sn1″> –
<!-
->
<input type=”tel” placeholder=”包” name=”sn2″ maxlength=”3″ id=”sn2″> –
<!-
->
<input type=”tel” placeholder=”密” name=”sn3″ maxlength=”3″ id=”sn3″> –
<!-
->
<input type=”tel” placeholder=”钥” name=”sn4″ maxlength=”3″ id=”sn4″>
</div>
</body>
<script>
$(document).ready(function () {
$(“#sn1”).focus();
//自动跳到下一个输入框
$(“input[name^=’sn’]”).each(function () {
var that = $(this);
that.keypress(function (e) {
var target = e.target;
var charCode = e.charCode;
if (!/\d/.test(String.fromCharCode(charCode))) {
e.preventDefault()
}
})
that.keyup(function () {
if (that.val().length === 3) {
var str = that.val();
var patt = /\d+/g;
var result = str.match(patt);
var value = result ? result.join(”) : ”;
if (value.length < 3) {
that.val(value);
} else if (that.next()) {
that.next().focus();
}
}
})
});
});
</script>
</html>
前端开发 显卡要求|web前端开发规范 实现符合w3c的web标准|埃森哲前端开发笔试题
» 本文来自：前端开发者 » 《前端开发input框 输完直接跳到下一个》
» 本文链接地址：https://www.rokub.com/4965.html
» 您也可以订阅本站：https://www.rokub.com
近期评论