html编程,要求:写一个网页,上面是显示区域,下面是输入框,输入一段代码,点确定后按格式显示到上面显示区域,要求代码中的空格格式也要正确
时间: 2024-04-16 21:25:59 浏览: 24
要保留输入代码中的空格格式,您可以使用 `<pre>` 标签来显示代码,并将输入的代码中的空格转换为实体 ` `。以下是相应的HTML和JavaScript代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>代码显示</title>
<style>
#display {
width: 100%;
height: 300px;
border: 1px solid black;
overflow: auto;
padding: 10px;
}
</style>
<script>
function displayCode() {
var codeInput = document.getElementById("codeInput").value;
var display = document.getElementById("display");
var formattedCode = codeInput.replace(/ /g, " ");
display.innerHTML = "<pre>" + formattedCode + "</pre>";
}
</script>
</head>
<body>
<div id="display"></div>
<textarea id="codeInput" rows="4" cols="50"></textarea>
<br />
<button onclick="displayCode()">确定</button>
</body>
</html>
```
这样,您在输入框中输入的代码将按照正确的格式显示在上面的显示区域中,并且空格将被正确地转换为HTML实体 ` `。上面的显示区域同样使用了一个带有滚动条的 `<div>` 元素,以便在显示大段代码时能够方便地滚动查看。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)