diff --git a/json_formatter.html b/json_formatter.html
index be88fa2..ad46ae6 100644
--- a/json_formatter.html
+++ b/json_formatter.html
@@ -137,6 +137,7 @@
.editor-content {
flex: 1;
position: relative;
+ overflow: hidden;
}
textarea {
@@ -154,15 +155,21 @@
}
.output-area {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
background: white;
padding: 15px;
font-family: "Consolas", "Monaco", "Courier New", monospace;
font-size: 13px;
line-height: 1.4;
- white-space: pre-wrap;
+ white-space: pre;
overflow: auto;
- height: 100%;
color: #333;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
}
.error-message {
@@ -411,13 +418,10 @@
// 语法高亮
output.innerHTML = highlightJSON(formatted);
- // 显示成功消息
- successMessage.textContent = "✅ JSON 格式化成功!";
- successMessage.style.display = "block";
-
- // 3秒后隐藏成功消息
+ // 在状态栏显示成功消息
+ document.getElementById("status").textContent = "✅ JSON 格式化成功!";
setTimeout(() => {
- successMessage.style.display = "none";
+ document.getElementById("status").textContent = "就绪";
}, 3000);
} catch (error) {
// 显示错误
@@ -446,12 +450,11 @@
const minified = JSON.stringify(jsonObj);
output.textContent = minified;
- successMessage.textContent = "✅ JSON 压缩成功!";
- successMessage.style.display = "block";
+ // 在状态栏显示成功消息
+ document.getElementById("status").textContent = "✅ JSON 压缩成功!";
errorMessage.style.display = "none";
-
setTimeout(() => {
- successMessage.style.display = "none";
+ document.getElementById("status").textContent = "就绪";
}, 3000);
} catch (error) {
errorMessage.innerHTML = `❌ JSON 格式错误: ${error.message}`;
@@ -533,11 +536,10 @@
navigator.clipboard
.writeText(textToCopy)
.then(() => {
- successMessage.textContent = "📋 已复制到剪贴板!";
- successMessage.style.display = "block";
-
+ // 在状态栏显示成功消息
+ document.getElementById("status").textContent = "📋 已复制到剪贴板!";
setTimeout(() => {
- successMessage.style.display = "none";
+ document.getElementById("status").textContent = "就绪";
}, 2000);
})
.catch(() => {
@@ -549,11 +551,10 @@
document.execCommand("copy");
document.body.removeChild(textArea);
- successMessage.textContent = "📋 已复制到剪贴板!";
- successMessage.style.display = "block";
-
+ // 在状态栏显示成功消息
+ document.getElementById("status").textContent = "📋 已复制到剪贴板!";
setTimeout(() => {
- successMessage.style.display = "none";
+ document.getElementById("status").textContent = "就绪";
}, 2000);
});
}