316 lines
9.0 KiB
HTML
316 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>输入框自动全选和放大提示</title>
|
||
<style>
|
||
/* 基本样式 */
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
padding: 20px;
|
||
}
|
||
|
||
input {
|
||
width: 200px;
|
||
padding: 8px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
font-family: 'Consolas';
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
margin-bottom: 10px;
|
||
text-align: right;
|
||
}
|
||
|
||
input:focus {
|
||
color: black;
|
||
}
|
||
|
||
/* 按钮样式 */
|
||
button {
|
||
padding: 10px 15px;
|
||
font-size: 16px;
|
||
border: none;
|
||
border-radius: 5px;
|
||
background-color: #007bff;
|
||
color: white;
|
||
cursor: pointer;
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
/* 提示数字样式 */
|
||
.number-tip {
|
||
position: absolute;
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
font-family: 'Consolas';
|
||
color: #333;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
border: 1px solid #ccc;
|
||
padding: 10px;
|
||
border-radius: 10px;
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
transition: opacity 0.5s ease, transform 0.5s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.number-tip.hide {
|
||
opacity: 0;
|
||
transform: scale(0.5);
|
||
}
|
||
|
||
/* 颜色样式 */
|
||
.color-0 {
|
||
color: #153fea;
|
||
}
|
||
|
||
.color-1 {
|
||
color: #15f00e;
|
||
}
|
||
|
||
.color-2 {
|
||
color: #6963688a;
|
||
}
|
||
|
||
/* 错误状态样式 */
|
||
.number-tip.error {
|
||
background: rgba(255, 200, 200, 0.9);
|
||
border-color: #ff0000;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
label {
|
||
/* display: block; */
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="form-group">
|
||
<label for="number1">数字 1:</label>
|
||
<input type="text" id="number1" placeholder="请输入数字 1">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="number2">数字 2:</label>
|
||
<input type="text" id="number2" placeholder="请输入数字 2">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="number3">数字 3:</label>
|
||
<input type="text" id="number3" placeholder="请输入数字 3">
|
||
</div>
|
||
|
||
<button id="focusNumber1">激活数字 1 输入框</button>
|
||
<button id="focusNumber2">激活数字 2 输入框</button>
|
||
<button id="focusNumber3">激活数字 3 输入框</button>
|
||
|
||
<div id="numberTip" class="number-tip hide"></div>
|
||
|
||
<script>
|
||
// 获取所有的输入框和提示元素
|
||
const inputBoxes = document.querySelectorAll('input[type="text"]');
|
||
const numberTip = document.getElementById('numberTip');
|
||
|
||
// 按钮点击事件
|
||
document.getElementById('focusNumber1').addEventListener('click', () => {
|
||
document.getElementById('number1').focus();
|
||
});
|
||
|
||
document.getElementById('focusNumber2').addEventListener('click', () => {
|
||
document.getElementById('number2').focus();
|
||
});
|
||
|
||
document.getElementById('focusNumber3').addEventListener('click', () => {
|
||
document.getElementById('number3').focus();
|
||
});
|
||
|
||
// 添加输入范围配置
|
||
const inputRanges = {
|
||
0: { min: 0, max: 100 }, // 第一个输入框：0-100
|
||
1: { min: 100, max: 1000 }, // 第二个输入框：100-1000
|
||
2: { min: 1000, max: 10000 } // 第三个输入框：1000-10000
|
||
};
|
||
|
||
// 为所有输入框添加事件监听
|
||
inputBoxes.forEach((inputBox, index) => {
|
||
// 输入框获取焦点时
|
||
inputBox.addEventListener('focus', (event) => {
|
||
event.target.select();
|
||
const value = event.target.value;
|
||
if (value !== '') {
|
||
const rawValue = value.replace(/\s/g, '');
|
||
showNumberTip(formatNumberWithColor(rawValue), inputBox, index);
|
||
}
|
||
});
|
||
|
||
inputBox.addEventListener('input', (event) => {
|
||
const value = event.target.value;
|
||
if (value !== '') {
|
||
const rawValue = value.replace(/\s/g, '');
|
||
const numValue = parseFloat(rawValue);
|
||
const range = inputRanges[index];
|
||
|
||
// 只检查最大值，允许临时小于最小值
|
||
if (!isNaN(numValue) && numValue <= range.max) {
|
||
// 保存有效值
|
||
event.target.value = formatNumber(rawValue);
|
||
event.target.dataset.lastValidValue = event.target.value;
|
||
// 显示放大提示
|
||
showNumberTip(formatNumberWithColor(rawValue), inputBox, index, false);
|
||
} else if (!isNaN(numValue) && numValue > range.max) {
|
||
// 如果超出最大值，显示错误提示
|
||
showNumberTip(
|
||
`超出最大值 ${range.max}`,
|
||
inputBox,
|
||
index,
|
||
true
|
||
);
|
||
// 还原到上一个有效值或清空
|
||
if (event.target.dataset.lastValidValue) {
|
||
event.target.value = event.target.dataset.lastValidValue;
|
||
} else {
|
||
event.target.value = '';
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// 输入框失去焦点时
|
||
inputBox.addEventListener('blur', (event) => {
|
||
const value = event.target.value;
|
||
let finalValue = value;
|
||
|
||
// 处理小数点
|
||
if (value.includes('.')) {
|
||
const [integerPart, decimalPart] = value.split('.');
|
||
if (!decimalPart || decimalPart.replace(/[^\d]/g, '').length === 0) {
|
||
finalValue = integerPart;
|
||
}
|
||
}
|
||
|
||
// 检查最小值
|
||
if (finalValue !== '') {
|
||
const numValue = parseFloat(finalValue.replace(/\s/g, ''));
|
||
const range = inputRanges[index];
|
||
|
||
if (!isNaN(numValue)) {
|
||
if (numValue < range.min) {
|
||
// 如果小于最小值，显示错误提示
|
||
showNumberTip(
|
||
`不能小于最小值 ${range.min}`,
|
||
inputBox,
|
||
index,
|
||
true
|
||
);
|
||
// 设置为最小值
|
||
event.target.value = range.min;
|
||
} else if (numValue <= range.max) {
|
||
// 值在有效范围内
|
||
event.target.value = finalValue;
|
||
// 隐藏提示
|
||
numberTip.classList.add('hide');
|
||
}
|
||
}
|
||
}
|
||
|
||
});
|
||
});
|
||
|
||
// 修改数字格式化函数，移除输入框的颜色格式化
|
||
function formatNumber(value) {
|
||
// 分割整数部分和小数部分
|
||
const [integerPart, decimalPart] = value.split('.');
|
||
|
||
// 格式化整数部分，只添加空格，不添加颜色
|
||
const formattedInteger = integerPart
|
||
.replace(/[^\d]/g, '')
|
||
.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
|
||
|
||
// 格式化小数部分，只添加空格，不添加颜色
|
||
if (decimalPart !== undefined) {
|
||
const formattedDecimal = decimalPart
|
||
.replace(/[^\d]/g, '')
|
||
.replace(/(\d{3})/g, '$1 ')
|
||
.trim();
|
||
return `${formattedInteger}.${formattedDecimal}`;
|
||
}
|
||
|
||
return formattedInteger;
|
||
}
|
||
|
||
// 修改彩色格式化函数
|
||
function formatNumberWithColor(value) {
|
||
if (!value.includes('.')) {
|
||
// 如果没有小数点，从右向左添加颜色
|
||
return value
|
||
.replace(/[^\d]/g, '')
|
||
.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
|
||
.split(' ')
|
||
.map((group, index, array) => `<span class="color-${(array.length - 1 - index) % 3}">${group}</span>`)
|
||
.join(' ');
|
||
}
|
||
|
||
// 有小数点的情况
|
||
const [integerPart, decimalPart] = value.split('.');
|
||
|
||
// 整数部分：从右向左添加颜色
|
||
const coloredInteger = integerPart
|
||
.replace(/[^\d]/g, '')
|
||
.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
|
||
.split(' ')
|
||
.map((group, index, array) => `<span class="color-${(array.length - 1 - index) % 3}">${group}</span>`)
|
||
.join(' ');
|
||
|
||
// 小数部分：从左向右添加颜色
|
||
const coloredDecimal = decimalPart
|
||
.replace(/[^\d]/g, '')
|
||
.replace(/(\d{3})/g, '$1 ')
|
||
.trim()
|
||
.split(' ')
|
||
.map((group, index) => `<span class="color-${index % 3}">${group}</span>`)
|
||
.join(' ');
|
||
|
||
return `${coloredInteger}.${coloredDecimal}`;
|
||
}
|
||
|
||
// 添加一个变量来存储定时器
|
||
let hideTimer;
|
||
|
||
// 更新显示提示的函数
|
||
function showNumberTip(value, inputBox, index, isError = false) {
|
||
if (hideTimer) {
|
||
clearTimeout(hideTimer);
|
||
}
|
||
|
||
numberTip.innerHTML = value;
|
||
numberTip.classList.toggle('error', isError);
|
||
|
||
const rect = inputBox.getBoundingClientRect();
|
||
const tipRect = numberTip.getBoundingClientRect();
|
||
|
||
let left = rect.left;
|
||
let top = rect.bottom;
|
||
if (top + tipRect.height > window.innerHeight) {
|
||
top = rect.top - tipRect.height;
|
||
}
|
||
|
||
numberTip.style.left = `${left}px`;
|
||
numberTip.style.top = `${top}px`;
|
||
numberTip.classList.remove('hide');
|
||
|
||
hideTimer = setTimeout(() => {
|
||
numberTip.classList.add('hide');
|
||
}, 6000);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|