您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> ASP.NET 基礎

ASP.NET TextBox 實現 Enter/Ctrl+Enter 切換發送與換行（仿 QQ 輸入體驗）

編輯：ASP.NET 基礎

需求分析

即時通訊輸入框經典交互：

模式 A：Enter 發送，Ctrl+Enter 換行
模式 B：Ctrl+Enter 發送，Enter 換行
用戶可點擊提示文字切換模式，狀態持久化

核心難點與解決

完整 JavaScript 實現


<textarea id="txtcontent" onkeyup="IsEnter(event)"></textarea>
<div id="sendtype" style="cursor:pointer; color:blue;">[Enter發送消息]</div>

<script>
var sendMode = 1; // 1: Enter發送, 2: Ctrl+Enter發送

function IsEnter(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;
    var typeEl = document.getElementById("sendtype");
    var txt = document.getElementById("txtcontent");

    if (typeEl.innerHTML == "[Enter發送消息]") { // 模式 A
        if (key == 13 && !e.ctrlKey) { // Enter 發送
            send();
            e.returnValue = false; // IE 阻止默認
            e.preventDefault ? e.preventDefault() : null; // 標準阻止
            txt.value = ""; // 清空輸入框
            return false;
        }
        if (e.ctrlKey && key == 13) { // Ctrl+Enter 換行
            txt.value += "\n";
        }
    } else { // 模式 B：Ctrl+Enter 發送
        if (e.ctrlKey && key == 13) {
            send();
            return false;
        }
        // Enter 自動換行（textarea 默認行為）
    }
}

// 切換模式
document.getElementById("sendtype").onclick = function() {
    sendMode = sendMode == 1 ? 2 : 1;
    this.innerHTML = sendMode == 1 ? "[Enter發送消息]" : "[Ctrl+Enter發送消息]";
    // 可同步 localStorage 持久化
};

function send() {
    var msg = document.getElementById("txtcontent").value.trim();
    if (msg) {
        console.log("發送:", msg);
        // 實際項目中調用 WebSocket/SignalR 發送
    }
}
</script>

關鍵兼容性處理

事件對象統一：`var e = evt || window.event;` 覆蓋 IE/標準瀏覽器
鍵碼統一：`var key = e.keyCode || e.which;`
阻止默認：`e.returnValue = false` (IE) + `e.preventDefault()` (標準)
事件類型選擇：`onkeyup` 而非 `onkeydown`，確保 `ctrlKey` 狀態準確

測試驗證矩陣

難點	原因	解決方案
event 對象跨瀏覽器差異	IE 用 `window.event`，FF/Chrome 用參數 `evt`	`var e = evt \|\| window.event; var key = e.keyCode \|\| e.which;`
keydown 無法檢測組合鍵	keydown 觸發時修飾鍵狀態不穩	改用 keyup 事件，按鍵釋放時狀態確定
Enter 鍵默認換行與提交衝突	表單提交、換行、自定義發送三方博弈	`e.returnValue = false; e.preventDefault(); txt.value = ''` 組合阻斷