我正在try 开发一种多输入表单，在该表单中我粘贴一个长数字，该数字会自动拆分 for each 输入的两个数字.
一切都很正常，直到用户粘贴了一个只有5个数字的数字，比如45896，并且在第一个输入中创建了另一个数字，而不是报告错误.我不明白表单如何在第一次输入时留下空白，然后通过发明一个数字来填充，而不是在最后一次输入时留下空白.
此外，我开发了else if (input.value.length !== 2 ) input.value = '0' + input.value;，如果输入只有一个数字，但只有当用户输入数字时，才会在数字前面加上0.
我希望粘贴功能显示一个错误，如果其中一个输入包含的数字少于2位，并且当粘贴长度小于6位的数字时，空格保留在最后一个输入上，而不是第一个上.
我的代码中有错误吗？或者我应该改进它以达到我的目标？
<style>
.circle input {
border-radius: 999px;
float: left;
max-width: 100px;
font-size: 2em;
text-align: center;
height: 100px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="tkt_1">
<div class="circle">
<input type="tel" min="1" max="99" minlength="2" maxlength="2" oninput="if((this.value.length) > 2) {this.value = this.value.substring(0, 2);}" onchange="handleChange(this);" placeholder="00" />
</div>
<div class="circle">
<input type="tel" min="1" max="99" minlength="2" maxlength="2" oninput="if((this.value.length) > 2) {this.value = this.value.substring(0, 2);}" onchange="handleChange(this);" placeholder="00" />
</div>
<div class="circle">
<input type="tel" min="1" max="99" minlength="2" maxlength="2" oninput="if((this.value.length) > 2) {this.value = this.value.substring(0, 2);}" onchange="handleChange(this);" placeholder="00" />
</div>
</form>
<script>
// Paste numbers from clipboard in multiple input
document.addEventListener("paste", function (e) {
// if the target is a text input
if (e.target.type === "tel") {
var data = e.clipboardData.getData('Text');
// split clipboard text into single characters
data = data.replace(/[^0-9]/g, "").split(/(?=(?:..)*$)/g);
// find all other text inputs
[].forEach.call(document.querySelectorAll("input[type=tel]"), (node, index) => {
// And set input value to the relative character
node.value = data[ index ] ?? "";
});
}
});
// Validation
function handleChange(input) {
if (input.value < 0) input.value = "";
else if (input.value.length !== 2 ) input.value = '0' + input.value;
else if (input.value < 0.9 || input.value > 99 || input.value.length === 1 || input.value.length === 0) {
input.style.backgroundColor = 'red';
return false;
} else {
input.style.backgroundColor = '';
return true;
}
}
// Input only Numbers
$('.circle input').keypress(function (event) {
event = event || window.event;
var charCode = event.which || event.keyCode;
var charStr = String.fromCharCode(charCode);
// FireFox key Del - Supr - Up - Down - Left - Right
if (event.key !== undefined && event.charCode === 0) {
return;
}
//Only Num
if (!/^([0-9])*$/.test(charStr)) {
event.preventDefault();
}
//Num and letters
if (!/^[a-zA-Z0-9]+$/.test(charStr)) {
event.preventDefault();
}
});
</script>