首页使用前端做个input输入框输入时可以看见输入框的样子失焦或回车就变成文字看不到输入框的样子

使用前端做个input输入框输入时可以看见输入框的样子失焦或回车就变成文字看不到输入框的样子

时间: 2024-04-20 17:26:01 浏览: 13

您可以使用HTML和CSS来实现这样的效果。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <style> .input-container { display: inline-block; position: relative; } .input-text { border: none; padding: 5px; font-size: 16px; } .input-box { position: absolute; top: 0; left: 0; padding: 5px; font-size: 16px; color: transparent; pointer-events: none; } </style> </head> <body> <div class="input-container"> <input type="text" class="input-text" onblur="showText(this)" onkeydown="showTextOnEnter(event, this)"> <div class="input-box">输入框的样子</div> </div> <script> function showText(input) { const inputBox = input.nextElementSibling; inputBox.innerText = input.value; input.style.display = 'none'; inputBox.style.color = 'initial'; } function showTextOnEnter(event, input) { if (event.keyCode === 13) { showText(input); } } </script> </body> </html> ``` 在上面的代码中，我们使用了一个包含输入框和一个文本框的容器。当输入框失焦或按下回车键时，通过JavaScript来切换显示和隐藏输入框和文本框。您可以将该代码保存为一个HTML文件，然后在浏览器中打开该文件，就能看到效果。输入时可以看到输入框的样子，失焦或回车后就会变成文字，看不到输入框的样子。