首页创建一个网页，页面有个输入框和提交按钮，用户在输入框中输入内容并点击按钮，页面显示用户的输入内容；；如果用户输入值为空，则弹出提示内容不能为空代码怎么写

创建一个网页，页面有个输入框和提交按钮，用户在输入框中输入内容并点击按钮，页面显示用户的输入内容；；如果用户输入值为空，则弹出提示内容不能为空代码怎么写

时间: 2024-09-27 13:18:08 浏览: 39

创建一个简单的HTML和JavaScript结合的网页来完成这个功能，可以按照下面的步骤编写： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>页面示例</title> </head> <body> <form id="myForm"> <label for="inputField">请输入内容:</label> <input type="text" id="inputField" name="content" required> <button type="submit">提交</button> <p id="errorMessage" style="display:none;">内容不能为空!</p> </form> <script> document.getElementById('myForm').addEventListener('submit', function(e) { e.preventDefault(); // 阻止表单默认提交行为 var inputContent = document.getElementById('inputField').value; if (inputContent.trim() === '') { // 判断是否为空，trim()去除首尾空白 document.getElementById('errorMessage').style.display = 'block'; // 显示错误提示 } else { document.getElementById('errorMessage').style.display = 'none'; // 验证通过，隐藏错误提示 // 这里你可以添加实际将输入显示到页面上的代码，比如： // alert(inputContent); 或者更新某个div的内容等 } }); </script> </body> </html> ``` 在这个代码中，当用户点击提交按钮时，会阻止表单的默认提交行为，并检查输入字段的内容。如果为空，就显示错误消息；如果不空，则隐藏错误消息。这是一个基础示例，可以根据需要进一步定制样式和实际展示输入内容的方式。

阅读全文