【前端】输入框输入内容时，根据文本长度自动分割，中间用横杠分割
目录
一、需求
二、效果图
三、示例
1、HTML结构
2、CSS样式
3、jq实现
4、获取输入框的值
四、拓展，文本自动填充
一、需求
有4个输入框，每个输入框限制5个字符，根据文本长度字段分割，每个输入框中间用横杠分割，如gWphJ-BCuoe-AdYEH-WhHUa-P0jF1
要求：
① 输入满后自动跳转到下一个输入框中；
② 支持粘贴，支持粘贴带横杠的字符串（如：gWphJ-BCuoe-AdYEH-WhHUa-P0jF1），也支持粘贴不带横杠的字符串（自动按每5个字符分割）；
③ 退格处理，当在空输入框按退格键时，跳转到上一个输入框。
二、效果图
支持手动输入，也支持粘贴输入
三、示例
1、HTML结构
<div class="code-input-container"><input type="text" maxlength="5" class="code-input" data-index="1"><span class="separator">-</span><input type="text" maxlength="5" class="code-input" data-index="2"><span class="separator">-</span><input type="text" maxlength="5" class="code-input" data-index="3"><span class="separator">-</span><input type="text" maxlength="5" class="code-input" data-index="4">
</div>2、CSS样式
.code-input-container {display: flex;align-items: center;justify-content: center;gap: 5px;
}.code-input {width: 80px;height: 40px;text-align: center;font-size: 16px;border: 1px solid #ccc;border-radius: 4px;
}.separator {font-size: 20px;font-weight: bold;color: #666;
}3、jq实现
// 输入5位字符时，使用横行分割，光标自动定位
document.addEventListener('DOMContentLoaded', function() {const inputs = document.querySelectorAll('.code-input');// 自动跳转逻辑inputs.forEach(input => {input.addEventListener('input', function(e) {const index = parseInt(this.dataset.index);// 如果输入满5个字符，跳转到下一个输入框if (this.value.length === 5 && index < inputs.length) {inputs[index].focus();}});// 处理退格键input.addEventListener('keydown', function(e) {const index = parseInt(this.dataset.index);// 如果当前输入框为空且按下退格键，跳转到上一个输入框if (e.key === 'Backspace' && this.value.length === 0 && index > 1) {e.preventDefault();inputs[index - 2].focus();}});});// 粘贴处理（自动分割粘贴的内容）inputs[0].addEventListener('paste', function(e) {e.preventDefault();const pasteData = e.clipboardData.getData('text').trim();// 如果粘贴内容包含横杠，按横杠分割if (pasteData.includes('-')) {const parts = pasteData.split('-');parts.forEach((part, i) => {if (i < inputs.length) {inputs[i].value = part.substring(0, 5);}});} // 否则按每5个字符分割else {for (let i = 0; i < inputs.length; i++) {const start = i * 5;inputs[i].value = pasteData.substring(start, start + 5);}}// 聚焦到最后一个有内容的输入框let lastFilledIndex = 0;for (let i = 0; i < inputs.length; i++) {if (inputs[i].value.length > 0) {lastFilledIndex = i;}}inputs[lastFilledIndex].focus();});
});4、获取输入框的值
// 获取每个输入框的值
function getFullCode() {const inputs = document.querySelectorAll('.code-input');const codeParts = Array.from(inputs).map(input => input.value);// 验证每个部分的长度是否为5const isValid = codeParts.every(part => part.length === 5);if (!isValid) {// 高亮显示不符合要求的输入框inputs.forEach(input => {if (input.value.length !== 5) {input.style.borderColor = 'red';input.style.backgroundColor = '#fff0f0';} else {input.style.borderColor = '';input.style.backgroundColor = '';}});// 返回错误信息return {success: false,message: '邀请码不完整',code: null};}// 返回成功结果return {success: true,message: '验证通过',code: codeParts.join('-')};
}///// 使用示例 ////////////
const result = getFullCode();if (result.success) {console.log('完整代码:', result.code);// 提交表单或进行下一步操作
} else {console.error('错误:', result.message);// 显示错误提示给用户alert(result.message);
}四、拓展，文本自动填充
如果URL为“http://xxx.xx?visit_code=qtc3Z-lNIr4-fbGbr-HqUdG”，从URL参数中获取visit_code，并自动填充到输入框中。
// 自动填充邀请码到输入框
function autoFillInviteCode(fullCode) {// 清除所有输入框的当前内容和错误样式const inputs = document.querySelectorAll('.code-input');inputs.forEach(input => {input.value = '';input.style.borderColor = '';input.style.backgroundColor = '';});// 移除所有横杠，只保留字母数字const cleanCode = fullCode.replace(/-/g, '');// 检查总长度是否为25个字符（5部分×5字符）if (cleanCode.length !== 20) {alert('邀请码格式不正确，应为20个字符');return false;}// 分割并填充到各个输入框for (let i = 0; i < 4; i++) {const startPos = i * 5;inputs[i].value = cleanCode.substring(startPos, startPos + 5);}return true;
}// 获取邀请码并自动填充
document.addEventListener('DOMContentLoaded', function() {// 从URL参数获取邀请码（假设参数名为visit_code）const urlParams = new URLSearchParams(window.location.search);const inviteCode = urlParams.get('visit_code');if (inviteCode) {autoFillInviteCode(inviteCode);alert('邀请码已自动填充');}});