仅当光标位于输入字段时禁用回车键回发

Question

我正在开发一个用户控件来显示 Dialogflow 的聊天框，我想输入以将在框中输入的字符串提交给 JavaScript 事件而不是后面的代码。我希望能够将此用户控件添加到我的任何 .net 页面，这些页面包含自己的按钮和输入。不幸的是，这个要求使我无法采取简单的方法并禁用表单中的回车键提交行为。

这里是控件的HTML：

<div id="mainWrapper">
    <div id="result">

    </div>
    <div id="inputField">
        <input placeholder="Ask me a question" id="query" type="text" />
    </div>
    <asp:HiddenField ID="access" runat="server" />
</div>

目前我的代码唯一要做的就是在页面加载时为该隐藏字段分配一个值。我已经尝试将输入更改为 asp:TextBox，并添加 UseSubmitBehavior="False"，但它仍然会导致回发。我还在我正在使用的 JavaScript 中添加了 return false;，但回发似乎是在它运行之前发生的。

这里是相关的 JavaScript:

(function () {
    "use strict";
    var token, queryInput, resultDiv;
    var ENTER_KEY_PRESS = 13;
    var client;
    window.onload = init;

    function init() {
        token = document.getElementByID("<%= access.ClientID %>").value;
        queryInput = document.getElementById("query");
        resultDiv = document.getElementById("result");

        queryInput.addEventListener("keydown", keyDown);
    }

    function keyDown(event) {
        if (event.which === ENTER_KEY_PRESS) {
            console.log("Enter pressed")
            var queryValue = queryInput.value;
            queryInput.value = "";

            sendTextToDIalogflow(value)
                .then(function (response) {
                    var result;
                    try {
                        result = response.result.fulfillment.speech;
                    } catch (error) {
                        result = "error: " + error.message;
                    }
                    console.log(result)
                })
                .catch(function (err) {
                    console.log("Whoops, something went wrong: " + err.message);
                });
        }
        else {
            console.log("Enter not pressed")
        }
    }
    return false;
})();

当光标位于文本框中时，如何防止回车键触发回传，而不对页面上的其他 asp.net 控件执行同样的操作？

Answer 1

这可能不是唯一的事情，我注意到您没有按照自己的模式查找元素 ID：

queryInput = document.getElementById("<%= query.ClientID %>");
resultDiv = document.getElementById("<%= result.ClientID %>");

并且在按键时，您需要防止输入传播。所以这是一个按键更改：

function keyDown(event) {
    if (event.which === ENTER_KEY_PRESS) {
        console.log("Enter pressed")
        var queryValue = queryInput.value;
        queryInput.value = "";

        sendTextToDIalogflow(value)
            .then(function (response) {
                var result;
                try {
                    result = response.result.fulfillment.speech;
                } catch (error) {
                    result = "error: " + error.message;
                }
                console.log(result)
            })
            .catch(function (err) {
                console.log("Whoops, something went wrong: " + err.message);
            });

         // ADDED CODE
         // REFERENCE - 
         if (event.preventDefault) {
             event.preventDefault();
         } else {
             event.returnValue = false;
         }
         // END ADDED CODE
    }
    else {
        console.log("Enter not pressed")
    }
}

仅当光标位于输入字段时禁用回车键回发

Disable enter key postback only when cursor is in input field

javascript

vb.net

asp.net

dialogflow-es