首页在上面代码中实现修改为，每个数字下面有一个横线

在上面代码中实现修改为，每个数字下面有一个横线

时间: 2024-11-22 16:39:22 浏览: 23

如果你想在每个输入的数字下方添加一个横线，可以稍微调整一下样式和HTML结构。我们可以使用CSS伪元素`:after`来为输入框添加动态生成的横线。这里是一个修改后的版本： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .number-input { width: 4em; /* 根据实际需求调整宽度 */ padding-right: 1em; position: relative; } .number-input:after { content: "_"; display: block; height: 1px; background-color: black; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } </style> </head> <body> <div class="number-input" id="numeric-input" oninput="updateLine(this)"> <input type="tel" pattern="\d*" maxlength="8" /> </div> <script> function updateLine(inputElement) { var line = document.createElement('span'); line.textContent = "_"; line.style.height = '1px'; line.style.backgroundColor = 'black'; line.style.position = 'absolute'; line.style.right = '0'; line.style.top = '50%'; if (inputElement.value.length > 0) { var cursorPos = inputElement.selectionStart; line.style.transform = `translateY(-${cursorPos * 2}px)`; } inputElement.parentNode.appendChild(line); } </script> </body> </html> ``` 在这个版本中，我们创建了一个`.number-input`类来包裹输入框，给每个输入的数字添加一个黑色的横线。`updateLine`函数会在用户输入后更新横线的位置，使其跟随光标移动。

阅读全文