要实现textarea的实时预览功能,可以通过JavaScript来监听textarea的输入事件,并将输入的内容实时渲染到预览区域。
以下是一个简单的示例代码:
<!DOCTYPE html>
<html>
<head>
<title>Textarea实时预览</title>
</head>
<body>
<textarea id="input" oninput="updatePreview()"></textarea>
<div id="preview"></div>
<script>
function updatePreview() {
var input = document.getElementById("input").value;
var preview = document.getElementById("preview");
preview.innerHTML = input;
}
</script>
</body>
</html>
上面的代码中,我们在textarea元素上绑定了一个oninput事件,当用户输入内容时就会触发updatePreview()函数,该函数获取textarea的值并将其实时渲染到预览区域中。
通过这种方式,用户在输入内容时就能立即看到预览效果,实现了实时预览功能。您也可以根据实际需求对预览内容进行样式处理或其他操作。