点击获取input中内容并在网页中显示
时间: 2024-09-27 19:02:25 浏览: 27
在网页开发中,如果你想获取用户在输入框(如`<input>`标签)中输入的内容,并在页面上动态显示,通常会涉及到前端JavaScript编程。以下是一个简单的示例,使用HTML和JavaScript配合完成这个功能:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>动态显示输入内容</title>
</head>
<body>
<label for="content">请输入内容:</label>
<input type="text" id="content" placeholder="请输入...">
<button onclick="displayInput()">显示内容</button>
<p id="display"></p>
<script>
function displayInput() {
// 获取输入框中的文本
var inputContent = document.getElementById('content').value;
// 将获取到的内容显示在id为'display'的段落元素中
document.getElementById('display').innerText = '您输入的内容:' + inputContent;
}
</script>
</body>
</html>
```
在这个例子中,当用户点击“显示内容”按钮时,`displayInput()`函数会被触发,它通过`document.getElementById('content')`获取输入框的内容,然后设置`<p>`元素的`innerText`属性显示出来。
阅读全文