要實現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的值并將其實時渲染到預覽區域中。
通過這種方式,用戶在輸入內容時就能立即看到預覽效果,實現了實時預覽功能。您也可以根據實際需求對預覽內容進行樣式處理或其他操作。