Question

我需要在SE编辑器的#wmd-button-bar中有一个用户输入字段以及一个按钮。用户可以在输入字段中输入一些数据，然后按下按钮来处理该数据。我正在使用用户脚本来实现这一目标。我创建了一个单独的MVCE，这里是Tampermonkey / Greasemonkey的direct install link。

要重现此问题，请安装userscript。重新加载此页面，然后单击＆＃34;编辑＆＃34;。您会注意到一个带有按钮的新空白输入框。关注＆＃34;编辑摘要＆＃34;框空白，将其留空，然后按Enter键。现在，您的插入符号将重点放在新的空白输入框上，而不是提交答案框。

如果你在＆＃34;问题标题＆＃34;中输入Enter，也会发生同样的情况。框。

在console.log消息中，您会注意到该按钮上发生了MouseClick事件！这不是预期的行为。事实上，这怎么可能呢？我们只是在编辑摘要框中按Enter键，甚至没有触及新的空白输入或其按钮。然后如何注册鼠标？

如何解决这个问题？

注意：按钮e.preventDefault();处理程序中的onclick是必需的。否则，当用户按下按钮处理他们的输入数据时，答案框会提交自己。

The Userscript Code：

function createModal(buttonBar){
    var div = document.createElement("div"),
        input = document.createElement("input"),
        btn = document.createElement("button");

    div.id = "box";

    input.type = "text";

    btn.innerHTML = "Button";
    btn.onclick = function(e){
        e.preventDefault();
        console.log("I was called");
        input.focus();
        console.dir(e);
        console.trace();
    };

    div.appendChild(input);
    div.appendChild(btn);

    return div;
}

setInterval(function () {
    var cont = document.querySelector(".wmd-container:not(.processed)"), ul, buttonBar, div;

    if (cont && (ul = cont.querySelector(".wmd-button-bar ul"))) {
        cont.classList.add("processed");

        buttonBar = cont.querySelector("div[id^=wmd-button-bar]");

        div = createModal(buttonBar);
        buttonBar.appendChild(div);
    }
}, 500)

Answer 1

其默认的HTML行为。 buttons中的所有form都是type="submit"。按下enter时，默认情况下单击form的最新按钮，并调用其处理程序。要解决此问题，请使用type="button"创建按钮。

console.log(document.querySelector("#a").type)
console.log(document.querySelector("#b").type)
console.log(document.querySelector("#c").type)

<form>
    <input type="text">
    <button id="a" onclick="console.log('a')">Submit type</button>
    <button id="b" onclick="console.log('b')" type="button">Button type</button>
    <input id="c" type="submit" value="Input Submit type">
</form>

您可以refer this来了解<button>和<input type="button">的行为。

如果您仅以document.querySelector("#box").children[1].type的身份登录控制台，它将显示为submit。

默认情况下，

按钮用作submit类型，除非明确指定（submit（默认）/ reset / button）。只需运行document.querySelector("#box").children[1].type=button。您会发现它按预期运行。

跨浏览器中的行为相同，并且在Firefox Nightly（开发人员版本），Chrome，Safari和works a little bit different in IE中进行了测试。

此外，您可以看到点击是默认情况，因为它是内部触发的，因此console.log(event.detail)是0。左键触发时将为1。 MDN Docs on click event

Answer 2

我在firefox浏览器中尝试了以下代码，并且可以正常工作。

function createModal(buttonBar){
    var div = document.createElement("div"),
        input = document.createElement("input"),
        btn = document.createElement("button");

    div.id = "box";

    input.type = "text";
    btn.type = "button";

    btn.innerHTML = "Button";
    btn.onclick = function(e){
        console.log("I was called");
        input.focus();
        console.dir(e);
        console.trace();
    };

    div.appendChild(input);
    div.appendChild(btn);

    return div;
}

setInterval(function () {
    var cont = document.querySelector(".wmd-container:not(.processed)"), ul, buttonBar, div;

    if (cont && (ul = cont.querySelector(".wmd-button-bar ul"))) {
        cont.classList.add("processed");

        buttonBar = cont.querySelector("div[id^=wmd-button-bar]");

        div = createModal(buttonBar);
        buttonBar.appendChild(div);
    }
}, 500);

请注意，我已经设置了btn.type="button";，以确保不提交表单，并且还删除了e.preventDefault();，因为按钮现在永远不会提交表单。

请记住，默认情况下，如果不为type元素赋予button，则它的行为类似于submit按钮。

也触发了MouseClick事件，因为在提交表单时，单击事件是在表单中存在的提交按钮上触发的。因为您的按钮没有type属性，所以它的工作方式类似于提交按钮。因此当您按下Enter键时，MouseClick事件就被触发了（提交表单）。

您可以通过将来自浏览器开发人员工具的onclick处理程序添加到Save edits提交按钮，然后在文本字段中按Enter键来进行验证。

Answer 3

简短而简单的答案是为按钮元素强制输入

<button type="button"></button>

默认值为type="submit"，这就是为什么它会相应地起作用。

在另一个框

3 个答案: