v1.2.7 输入框多行自适应:超一行自动增高,最多4行(90px)内部滚动;Enter发送/Shift+Enter换行;发送后高度复原
This commit is contained in:
+17
-2
@@ -181,8 +181,22 @@ async function sendChat(text) {
|
|||||||
$("#send-btn").disabled = false;
|
$("#send-btn").disabled = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
$("#send-btn").addEventListener("click", () => { const v = $("#chat-input").value.trim(); if (v) { $("#chat-input").value = ""; sendChat(v); } });
|
$("#send-btn").addEventListener("click", () => { const v = $("#chat-input").value.trim(); if (v) { $("#chat-input").value = ""; autoResizeInput(); sendChat(v); } });
|
||||||
$("#chat-input").addEventListener("keydown", (e) => { if (e.key === "Enter") $("#send-btn").click(); });
|
|
||||||
|
/* 输入框多行自适应:超一行自动增高,最多 4 行(约90px);Enter 发送,Shift+Enter 换行 */
|
||||||
|
const chatInput = $("#chat-input");
|
||||||
|
const INPUT_MAX_H = 90;
|
||||||
|
function autoResizeInput() {
|
||||||
|
chatInput.style.height = "auto";
|
||||||
|
chatInput.style.height = Math.min(chatInput.scrollHeight, INPUT_MAX_H) + "px";
|
||||||
|
}
|
||||||
|
chatInput.addEventListener("input", autoResizeInput);
|
||||||
|
chatInput.addEventListener("keydown", (e) => {
|
||||||
|
if (e.key === "Enter" && !e.shiftKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
$("#send-btn").click();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
/* 复制当前回答(纯文本) */
|
/* 复制当前回答(纯文本) */
|
||||||
function copyMsg(btn) {
|
function copyMsg(btn) {
|
||||||
@@ -260,6 +274,7 @@ $("#clear-btn").addEventListener("click", clearChat);
|
|||||||
/* 快捷问题:点击 → 自动填入输入框并自动提交(需求2) */
|
/* 快捷问题:点击 → 自动填入输入框并自动提交(需求2) */
|
||||||
function askQuick(q) {
|
function askQuick(q) {
|
||||||
$("#chat-input").value = q;
|
$("#chat-input").value = q;
|
||||||
|
autoResizeInput();
|
||||||
sendChat(q);
|
sendChat(q);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+1
-1
@@ -49,7 +49,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="chips" id="chips"></div>
|
<div class="chips" id="chips"></div>
|
||||||
<div class="input-bar">
|
<div class="input-bar">
|
||||||
<input id="chat-input" type="text" placeholder="输入问题,如:湖人最近比赛怎么样?" autocomplete="off">
|
<textarea id="chat-input" rows="1" placeholder="输入问题,如:湖人最近比赛怎么样?(Enter 发送,Shift+Enter 换行)" autocomplete="off"></textarea>
|
||||||
<button id="send-btn">发送</button>
|
<button id="send-btn">发送</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+3
-1
@@ -109,7 +109,9 @@ main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 16
|
|||||||
.chips button:hover { border-color: var(--orange2); color: var(--orange2); }
|
.chips button:hover { border-color: var(--orange2); color: var(--orange2); }
|
||||||
|
|
||||||
.input-bar { display: flex; gap: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 10px 8px 18px; }
|
.input-bar { display: flex; gap: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 10px 8px 18px; }
|
||||||
#chat-input { flex: 1; background: transparent; border: none; outline: none; color: var(--txt); font-size: 15px; }
|
#chat-input { flex: 1; background: transparent; border: none; outline: none; color: var(--txt); font-size: 15px; line-height: 1.5; resize: none; overflow-y: auto; max-height: 90px; padding: 5px 0; font-family: inherit; }
|
||||||
|
#chat-input::-webkit-scrollbar { width: 5px; }
|
||||||
|
#chat-input::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
|
||||||
#send-btn { background: linear-gradient(135deg, #f97316, #ea580c); border: none; color: #fff; padding: 10px 24px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; }
|
#send-btn { background: linear-gradient(135deg, #f97316, #ea580c); border: none; color: #fff; padding: 10px 24px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; }
|
||||||
#send-btn:disabled { opacity: .5; cursor: wait; }
|
#send-btn:disabled { opacity: .5; cursor: wait; }
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user