html点击按钮给textarea框设置值
时间: 2023-04-07 15:03:24 浏览: 119
可以使用JavaScript来实现这个功能。首先,需要获取到按钮和文本框的DOM元素,然后在按钮的点击事件中,设置文本框的value属性即可。具体代码如下:
HTML代码:
```
<button id="btn">点击设置文本框的值</button>
<textarea id="textarea"></textarea>
```
JavaScript代码:
```
var btn = document.getElementById('btn');
var textarea = document.getElementById('textarea');
btn.onclick = function() {
textarea.value = '这是设置的文本框的值';
}
```
相关问题
将输出框内的值固定,按重置键也不会清除 html css
如果您是在 HTML 和 CSS 中实现这个功能,可以使用 JavaScript 来控制重置按钮的行为。具体来说,您可以使用 `localStorage` 来存储输出框的值,并在页面加载时从 `localStorage` 中读取这个值,并将其设置为输出框的初始值。然后在重置按钮被按下时,只清除用户输入的部分,而不是清空整个输出框。以下是一个示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定输出框的值</title>
<style>
#output {
width: 400px;
height: 200px;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<textarea id="output"></textarea>
<br>
<button id="reset">重置</button>
<script>
// 从 localStorage 中读取输出框的值
var outputElem = document.getElementById('output');
var savedOutput = localStorage.getItem('output');
if (savedOutput !== null) {
outputElem.value = savedOutput;
}
// 监听输出框的输入事件,将输入的内容保存到 localStorage 中
outputElem.addEventListener('input', function() {
localStorage.setItem('output', outputElem.value);
});
// 监听重置按钮的点击事件,只清除用户输入的部分
var resetBtn = document.getElementById('reset');
resetBtn.addEventListener('click', function() {
outputElem.value = savedOutput; // 恢复初始值
outputElem.selectionEnd = savedOutput.length; // 将光标移动到最后
});
</script>
</body>
</html>
```
这个示例会在页面加载时从 `localStorage` 中读取输出框的值,并将其设置为输出框的初始值。每次用户在输出框中输入内容时,会将输入的内容保存到 `localStorage` 中。当用户点击重置按钮时,会将输出框的值恢复为初始值,并将光标移动到最后。注意,这个示例中使用了 `selectionEnd` 属性来将光标移动到最后,这个属性的行为在不同浏览器中可能会有所不同,您可能需要根据实际情况做出调整。
普通的html页面怎么回显富文本框内容
普通的 HTML 页面可以使用 `<div>` 元素来回显富文本框的内容。你可以通过 JavaScript 获取富文本框的内容,并将其设置为 `<div>` 元素的 `innerHTML` 属性的值。这样,富文本框的内容就会在 `<div>` 元素中显示出来。
以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>回显富文本框内容</title>
</head>
<body>
<textarea id="myTextarea"></textarea>
<button onclick="showContent()">显示内容</button>
<div id="content"></div>
<script>
function showContent() {
var textarea = document.getElementById("myTextarea");
var contentDiv = document.getElementById("content");
contentDiv.innerHTML = textarea.value;
}
</script>
</body>
</html>
```
在上面的示例中,我们使用了一个 `<textarea>` 元素来输入富文本框的内容,一个按钮来触发回显操作,并使用了一个 `<div>` 元素来显示回显的内容。当点击按钮时,`showContent()` 函数会被调用,将 `<textarea>` 的内容设置为 `<div>` 的 `innerHTML` 属性的值,从而实现回显。
阅读全文