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

78
inputbox_with_tips.html
View File

@ -13,8 +13,10 @@
input { input {
width: 200px; width: 200px;
padding: 10px; padding: 8px;
font-size: 16px; font-size: 16px;
font-weight: bold;
font-family: 'Consolas';
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
margin-bottom: 10px; margin-bottom: 10px;
@ -25,11 +27,26 @@
color: black; 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 { .number-tip {
position: absolute; position: absolute;
font-size: 36px; font-size: 36px;
font-weight: bold; font-weight: bold;
font-family: 'Consolas';
color: #333; color: #333;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc; border: 1px solid #ccc;
@ -64,19 +81,57 @@
background: rgba(255, 200, 200, 0.9); background: rgba(255, 200, 200, 0.9);
border-color: #ff0000; border-color: #ff0000;
} }
.form-group {
margin-bottom: 1rem;
}
label {
/* display: block; */
margin-bottom: 0.5rem;
}
</style> </style>
</head> </head>
<body> <body>
<input type="text" placeholder="请输入数字 1"> <div class="form-group">
<input type="text" placeholder="请输入数字 2"> <label for="number1">数字 1:</label>
<input type="text" placeholder="请输入数字 3"> <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> <div id="numberTip" class="number-tip hide"></div>
<script> <script>
// 获取所有的输入框和提示元素 // 获取所有的输入框和提示元素
const inputBoxes = document.querySelectorAll('input[type="text"]'); const inputBoxes = document.querySelectorAll('input[type="text"]');
const numberTip = document.getElementById('numberTip'); 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 = { const inputRanges = {
0: { min: 0, max: 100 }, // 第一个输入框：0-100 0: { min: 0, max: 100 }, // 第一个输入框：0-100
@ -155,19 +210,17 @@
index, index,
true true
); );
// 清空输入或设置为最小值 // 设置为最小值
event.target.value = ''; event.target.value = range.min;
} else if (numValue <= range.max) { } else if (numValue <= range.max) {
// 值在有效范围内 // 值在有效范围内
event.target.value = finalValue; event.target.value = finalValue;
// 隐藏提示
numberTip.classList.add('hide');
} }
} }
} }
// 2秒后隐藏提示
setTimeout(() => {
numberTip.classList.add('hide');
}, 2000);
}); });
}); });
@ -243,7 +296,6 @@
const rect = inputBox.getBoundingClientRect(); const rect = inputBox.getBoundingClientRect();
const tipRect = numberTip.getBoundingClientRect(); const tipRect = numberTip.getBoundingClientRect();
let left = rect.left; let left = rect.left;
let top = rect.bottom; let top = rect.bottom;
if (top + tipRect.height > window.innerHeight) { if (top + tipRect.height > window.innerHeight) {