【前端】输入框输入内容时，根据文本长度自动分割，中间用横杠分割

目录

一、需求

二、效果图

三、示例

 1、HTML结构

2、CSS样式

3、jq实现

4、获取输入框的值

四、拓展，文本自动填充

---

一、需求

有4个输入框，每个输入框限制5个字符，根据文本长度字段分割，每个输入框中间用横杠分割，如gWphJ-BCuoe-AdYEH-WhHUa-P0jF1

要求：

① 输入满后自动跳转到下一个输入框中；

② 支持粘贴，支持粘贴带横杠的字符串（如：gWphJ-BCuoe-AdYEH-WhHUa-P0jF1），也支持粘贴不带横杠的字符串（自动按每5个字符分割）；

③ 退格处理，当在空输入框按退格键时，跳转到上一个输入框。

二、效果图

支持手动输入，也支持粘贴输入

三、示例

 1、HTML结构

  
  -
  
  -
  
  -
  

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);
  
  // 验证每个部分的长度是否为5
  const 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('邀请码已自动填充');
    }

});