murmur/demo3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update tips

Browse Source
This commit is contained in:
CSSC-WORK\murmur 2024-12-04 11:08:24 +08:00
parent 05d4e03681
commit d983067837
1 changed files with 65 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
inputbox_with_tips.html
View File

@ -13,8 +13,10 @@
input {
width: 200px;
padding: 10px;
padding: 8px;
font-size: 16px;
font-weight: bold;
font-family: 'Consolas';
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
@ -25,11 +27,26 @@
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;
@ -64,19 +81,57 @@
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>
<input type="text" placeholder="请输入数字 1">
<input type="text" placeholder="请输入数字 2">
<input type="text" placeholder="请输入数字 3">
<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
@ -155,19 +210,17 @@
index,
true
);
// 清空输入或设置为最小值
event.target.value = '';
// 设置为最小值
event.target.value = range.min;
} else if (numValue <= range.max) {
// 值在有效范围内
event.target.value = finalValue;
// 隐藏提示
numberTip.classList.add('hide');
}
}
}
// 2秒后隐藏提示
setTimeout(() => {
numberTip.classList.add('hide');
}, 2000);
});
});
@ -243,7 +296,6 @@
const rect = inputBox.getBoundingClientRect();
const tipRect = numberTip.getBoundingClientRect();
let left = rect.left;
let top = rect.bottom;
if (top + tipRect.height > window.innerHeight) {