| <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>IP输入控件</title> <style> /* 基础样式，可根据需求调整 */ .ip-input-group { display: flex; align-items: center; gap: 8px; font-size: 16px; } .ip-input { width: 80px; height: 36px; padding: 0 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; text-align: center; outline: none; } .ip-input:focus { border-color: #409eff; box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); } .ip-dot { font-size: 20px; color: #666; } </style> </head> <body> <div class="ip-input-group"> <input type="text" class="ip-input" maxlength="3" data-index="0" placeholder="0-255"> <span class="ip-dot">.</span> <input type="text" class="ip-input" maxlength="3" data-index="1" placeholder="0-255"> <span class="ip-dot">.</span> <input type="text" class="ip-input" maxlength="3" data-index="2" placeholder="0-255"> <span class="ip-dot">.</span> <input type="text" class="ip-input" maxlength="3" data-index="3" placeholder="0-255"> </div> <script> // 获取所有IP输入框 const ipInputs = document.querySelectorAll('.ip-input'); // 为每个输入框绑定事件 ipInputs.forEach(input => { // 1. 输入内容时校验（仅允许数字） input.addEventListener('input', function() { // 过滤非数字字符 this.value = this.value.replace(/[^0-9]/g, ''); // 限制数值不超过255 if (this.value > 255) { this.value = 255; } // 去除前导0（如输入012自动转为12，单独0保留） if (this.value.length > 1 && this.value.startsWith('0')) { this.value = this.value.replace(/^0+/, ''); } }); // 2. 按下按键时处理（.号跳转、回车/方向键适配） input.addEventListener('keydown', function(e) { const currentIndex = parseInt(this.dataset.index); const maxIndex = ipInputs.length - 1; // 按下.号时自动跳转到下一个输入框 if (e.key === '.' || e.key === 'Period') { e.preventDefault(); // 阻止输入.号 if (currentIndex < maxIndex) { ipInputs[currentIndex + 1].focus(); // 聚焦下一个 ipInputs[currentIndex + 1].select(); // 选中内容，方便直接输入 } } // 按下回车键跳转到下一个（最后一个则失去焦点） if (e.key === 'Enter') { e.preventDefault(); if (currentIndex < maxIndex) { ipInputs[currentIndex + 1].focus(); ipInputs[currentIndex + 1].select(); } else { this.blur(); // 最后一个输入框按回车失去焦点 } } // 按下右方向键（→）跳转到下一个 if (e.key === 'ArrowRight' && this.selectionEnd === this.value.length) { e.preventDefault(); if (currentIndex < maxIndex) { ipInputs[currentIndex + 1].focus(); ipInputs[currentIndex + 1].select(); } } // 按下左方向键（←）跳转到上一个 if (e.key === 'ArrowLeft' && this.selectionStart === 0) { e.preventDefault(); if (currentIndex > 0) { ipInputs[currentIndex - 1].focus(); ipInputs[currentIndex - 1].select(); } } }); // 3. 输入满3位自动跳转到下一个 input.addEventListener('change', function() { const currentIndex = parseInt(this.dataset.index); if (this.value.length === 3 && currentIndex < ipInputs.length - 1) { ipInputs[currentIndex + 1].focus(); ipInputs[currentIndex + 1].select(); } }); }); // 可选：获取完整IP地址的函数 function getIpAddress() { let ip = ''; ipInputs.forEach((input, index) => { const value = input.value || '0'; // 空值补0 ip += value + (index < 3 ? '.' : ''); }); return ip; } // 示例：点击按钮获取IP // document.querySelector('#getIpBtn').addEventListener('click', function() { // alert('当前IP：' + getIpAddress()); // }); </script> </body> </html> |
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2026-2-28 06:57 , Processed in 0.090320 second(s), 17 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2026 Discuz! Team.
