70 lines
1.6 KiB
HTML
70 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Autosave Textbox</title>
|
|
<style>
|
|
textarea {
|
|
width: 100%;
|
|
height: 300px;
|
|
font-family: monospace;
|
|
font-size: 1em;
|
|
}
|
|
#status {
|
|
font-size: 0.9em;
|
|
color: gray;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Autosave Textbox</h1>
|
|
<textarea id="editor" placeholder="Start typing..."></textarea>
|
|
<div id="status">Idle</div>
|
|
|
|
<script>
|
|
const textarea = document.getElementById("editor");
|
|
const status = document.getElementById("status");
|
|
|
|
let timeoutId;
|
|
let lastSentValue = "";
|
|
|
|
textarea.addEventListener("input", () => {
|
|
status.textContent = "Typing...";
|
|
clearTimeout(timeoutId);
|
|
|
|
timeoutId = setTimeout(() => {
|
|
const content = textarea.value;
|
|
|
|
if (content !== lastSentValue) {
|
|
saveContent(content);
|
|
} else {
|
|
status.textContent = "No changes";
|
|
}
|
|
}, 400);
|
|
});
|
|
|
|
function saveContent(text) {
|
|
status.textContent = "Saving...";
|
|
|
|
fetch("https://your-api-endpoint.example.com/save", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({ content: text })
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) throw new Error("Network response was not ok");
|
|
lastSentValue = text;
|
|
status.textContent = "Saved";
|
|
})
|
|
.catch(error => {
|
|
status.textContent = "Save failed";
|
|
console.error("Autosave failed:", error);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|